# Voice note · MIAN

An audio message as a waveform: play, pause, see where you are and drag to seek.

- Id: `voice-note` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/voice-note
- Use for: voice message, audio waveform player, voice memo, audio clip in chat.
- Alternatives: chat.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### In a conversation

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/voice-note/source