CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / marketing-content / voice-wave-player

Stable release
Back to category

Open experiment

Voice wave player

A self-contained voice-note playback surface with a native seek input and durable time labels. The demo timeline remains functional in reduced motion while decorative amplitude freezes into a readable signal shape.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<article class="cmp-voice-player" data-playing="false" style="--cmp-played: 0%">
  <header>
    <div><span>Voice note</span><strong>Nora · Design review</strong></div>
    <button type="button" data-speed aria-label="Change playback speed">1×</button>
  </header>
  <div class="cmp-voice-player__signal">
    <button type="button" data-play aria-label="Play voice note">
      <span aria-hidden="true">▶</span>
    </button>
    <div class="cmp-voice-player__wave" aria-hidden="true">
      <i style="--amp: 0.25"></i><i style="--amp: 0.55"></i><i style="--amp: 0.82"></i
      ><i style="--amp: 0.42"></i><i style="--amp: 0.68"></i><i style="--amp: 0.94"></i
      ><i style="--amp: 0.5"></i><i style="--amp: 0.32"></i><i style="--amp: 0.72"></i
      ><i style="--amp: 0.88"></i><i style="--amp: 0.38"></i><i style="--amp: 0.64"></i
      ><i style="--amp: 0.78"></i><i style="--amp: 0.28"></i><i style="--amp: 0.58"></i
      ><i style="--amp: 0.9"></i><i style="--amp: 0.46"></i><i style="--amp: 0.7"></i>
    </div>
  </div>
  <input
    type="range"
    min="0"
    max="24"
    value="0"
    step="1"
    aria-label="Voice note position"
    aria-valuetext="0 seconds of 24 seconds"
  />
  <footer><output>0:00</output><span>0:24</span></footer>
  <span class="cmp-voice-player__status" aria-live="polite">Paused at 0 seconds</span>
</article>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • Playback, replay, and speed are exposed through named native controls.
  • A native range input provides seeking and an updated value text.
  • Reduced motion freezes amplitude animation while playback time still advances.

License: MIT License for open-source use, modification, and distribution.

Continue testing

Related experiments