Voice note
An audio message as a waveform: play, pause, see where you are and drag to seek.
In a conversation
0:42
Transcript: “The proofs are in. Page six needs a wider margin, the rest is good to print.”
<div class="mn-stack" style="--mn-gap:.6rem;width:min(100%,24rem)">
<div class="mn-voice" data-mn-voice data-duration="42"><button class="mn-voice-play" type="button" aria-label="Play"><svg class="mn-voice-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4.5v15l12-7.5Z"/></svg><svg class="mn-voice-pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg></button><div class="mn-voice-wave" aria-label="Voice note from Ilse, position"></div><span class="mn-voice-time">0:42</span></div>
<p class="mn-muted" style="margin:0;font-size:.8125rem">Transcript: “The proofs are in. Page six needs a wider margin, the rest is good to print.”</p>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/voice-note.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-voice | The player. Add data-mn-voice and data-duration (seconds); data-src plays a real file. |
| mn-voice-play | The play / pause button, with two icons: mn-voice-go and mn-voice-pause. |
| mn-voice-wave | The waveform. Bars are drawn for you; pass real peaks (0 to 1) in data-peaks. |
| mn-voice-time | Elapsed time, or the length when stopped. |
Accessibility
- The waveform is a slider: arrow keys seek, Home and End jump, Space plays.
- The button’s label switches between Play and Pause.
- Offer a transcript next to any spoken message.
- Nothing plays until the person presses play.