Connection lost. Reconnecting… attempt 1 of 8
Paused. Your work is held on the server.
Could not reconnect.
This session has expired on the server.
An unhandled error has occurred.
Sedna.UI
v0.17.0 · main

Audio

tier 2 — classes

A player around the native <audio> element, a waveform for a voice message or a call recording, and a track list. The element's own controls stay native; the library adds the title, the meta line, the transcript and the row a recording sits in. Pictures that move are Video.

A player

The same .media-player as a video, with no picture: the .media-player-body is the whole of it, a .file-icon or a cover leading, and the <audio controls> inside .media-player-text, under the title, at the text column's width and the control height. A call recording carries its .media-transcript, speaker by speaker. The demo has no source; the app's goes on the element.

Call with the carrier about the week 38 returns 6:14Alex Fischer
Transcript
  1. Alex Fischer: I have fourteen returns from Friday with no delivery note attached.
  2. Carrier: They were scanned at the depot, so the notes should be on the portal by noon.
  3. Alex Fischer: Then I will hold the credit notes until they are.
<div class="media-player" style="max-width:560px">
    <div class="media-player-body">
        <span class="file-icon file-icon--media"><i class="ri-phone-line"></i></span>
        <span class="media-player-text">
            <strong class="media-player-title">Call with the carrier about the week 38 returns</strong>
            <span class="file-meta"><span>6:14</span><time datetime="2026-09-14T10:02">Today, 10:02</time><span>Alex Fischer</span></span>
            <audio controls preload="none" aria-label="Call with the carrier about the week 38 returns"></audio>
        </span>
        <span class="media-player-actions">
            <a class="btn btn-ghost btn-icon btn-sm" href="#" download aria-label="Download the recording, 5.9 MB"><i class="ri-download-2-line"></i></a>
        </span>
    </div>
    <details class="media-transcript" open>
        <summary>Transcript</summary>
        <ol>
            <li><button class="media-transcript-time" type="button" aria-label="Play from 0:04">0:04</button><span><strong>Alex Fischer:</strong> I have fourteen returns from Friday with no delivery note attached.</span></li>
            <li aria-current="true"><button class="media-transcript-time" type="button" aria-label="Play from 0:21">0:21</button><span><strong>Carrier:</strong> They were scanned at the depot, so the notes should be on the portal by noon.</span></li>
            <li><button class="media-transcript-time" type="button" aria-label="Play from 0:37">0:37</button><span><strong>Alex Fischer:</strong> Then I will hold the credit notes until they are.</span></li>
        </ol>
    </details>
</div>

A waveform

.audio-wave is a recording as a picture of itself: the play button, the .audio-wave-bars with each bar's height in --h and the ones already heard as .audio-wave-heard, and the .audio-wave-time. The <audio> is the app's and hidden, and the play button's name says the length. It is the voice message in a chat, and here a voicemail in a .list.

Voicemail

  • PN Priya Nair 0:07 / 0:19
  • TF Tomás Ferreira 0:42 
<div class="card" style="max-width:520px">
    <div class="card-head"><h3>Voicemail</h3></div>
    <ul class="list">
        <li>
            <div class="list-row">
                <span class="avatar avatar--viz-2">PN</span>
                <span class="list-main">
                    <span class="list-title">Priya Nair</span>
                    <span class="audio-wave">
                        <button class="btn btn-sm btn-primary btn-icon" type="button" aria-label="Play the voicemail from Priya Nair, 19 seconds"><i class="ri-play-fill"></i></button>
                        <span class="audio-wave-bars" aria-hidden="true">
                            <i class="audio-wave-heard" style="--h:35%"></i><i class="audio-wave-heard" style="--h:60%"></i><i class="audio-wave-heard" style="--h:85%"></i><i class="audio-wave-heard" style="--h:50%"></i><i class="audio-wave-heard" style="--h:30%"></i><i class="audio-wave-heard" style="--h:70%"></i><i class="audio-wave-heard" style="--h:95%"></i><i class="audio-wave-heard" style="--h:55%"></i>
                            <i style="--h:65%"></i><i style="--h:80%"></i><i style="--h:45%"></i><i style="--h:25%"></i><i style="--h:60%"></i><i style="--h:90%"></i><i style="--h:50%"></i><i style="--h:35%"></i><i style="--h:70%"></i><i style="--h:40%"></i><i style="--h:55%"></i><i style="--h:30%"></i>
                        </span>
                        <span class="audio-wave-time">0:07 / 0:19</span>
                    </span>
                </span>
                <span class="list-meta"><time datetime="2026-09-14T09:12">09:12</time></span>
            </div>
        </li>
        <li>
            <div class="list-row">
                <span class="avatar avatar--viz-4">TF</span>
                <span class="list-main">
                    <span class="list-title">Tomás Ferreira</span>
                    <span class="audio-wave">
                        <button class="btn btn-sm btn-icon" type="button" aria-label="Play the voicemail from Tomás Ferreira, 42 seconds"><i class="ri-play-fill"></i></button>
                        <span class="audio-wave-bars" aria-hidden="true">
                            <i style="--h:40%"></i><i style="--h:55%"></i><i style="--h:75%"></i><i style="--h:35%"></i><i style="--h:60%"></i><i style="--h:90%"></i><i style="--h:45%"></i><i style="--h:30%"></i><i style="--h:65%"></i><i style="--h:50%"></i><i style="--h:80%"></i><i style="--h:40%"></i><i style="--h:25%"></i><i style="--h:55%"></i><i style="--h:70%"></i><i style="--h:35%"></i><i style="--h:60%"></i><i style="--h:45%"></i><i style="--h:30%"></i><i style="--h:50%"></i>
                        </span>
                        <span class="audio-wave-time">0:42</span>
                    </span>
                </span>
                <span class="list-meta"><time datetime="2026-09-13T17:40">Yesterday</time></span>
            </div>
        </li>
    </ul>
</div>

A track list

A playlist is an ordered .list: each row a button that plays it, the length as the .list-meta, and the one playing marked aria-current="true". .media-track-num is a fixed-width number column, so one to twelve line up, and in the playing row it holds an equalizer glyph named “Playing”, in the brand.

Onboarding — the warehouse

4 parts
<div class="card" style="max-width:480px">
    <div class="card-head"><h3>Onboarding — the warehouse</h3><span class="badge">4 parts</span></div>
    <ol class="list" aria-label="Parts">
        <li>
            <button class="list-row" type="button">
                <span class="media-track-num">1</span>
                <span class="list-main">
                    <span class="list-title">Welcome, and where everything is</span>
                    <span class="list-sub">Priya Nair</span>
                </span>
                <span class="list-meta"><span class="text-nums">3:20</span></span>
            </button>
        </li>
        <li>
            <button class="list-row" type="button" aria-current="true">
                <span class="media-track-num"><i class="ri-equalizer-line" role="img" aria-label="Playing"></i></span>
                <span class="list-main">
                    <span class="list-title">Receiving at the dock</span>
                    <span class="list-sub">Alex Fischer</span>
                </span>
                <span class="list-meta"><span class="text-nums">8:05</span></span>
            </button>
        </li>
        <li>
            <button class="list-row" type="button">
                <span class="media-track-num">3</span>
                <span class="list-main">
                    <span class="list-title">Picking, packing and the label printer</span>
                    <span class="list-sub">Tomás Ferreira</span>
                </span>
                <span class="list-meta"><span class="text-nums">11:42</span></span>
            </button>
        </li>
        <li>
            <button class="list-row" type="button">
                <span class="media-track-num">4</span>
                <span class="list-main">
                    <span class="list-title">When something arrives damaged</span>
                    <span class="list-sub">Alex Fischer</span>
                </span>
                <span class="list-meta"><span class="text-nums">5:57</span></span>
            </button>
        </li>
    </ol>
</div>
↑ ↓ to move Enter to run Esc to close