オーディオプレーヤー
音楽プレーヤーカード。グラデーションのジャケット、曲名/アーティスト、再生・前後スキップ、ドラッグできる進捗バーと時間表示、再生中に揺れるイコライザーバーを備える。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 音楽・ポッドキャストの再生カード
- 曲名・ジャケットと一緒に見せる再生 UI
- <audio> の標準 UI を置き換えるとき
- 避ける場面
- 標準コントロールで足りる効果音・短い音声
- 多数の曲を一覧で並べる画面
- <audio> へ結線しない見た目だけの利用
- 構成要素
- ジャケット
- イコライザ
- 曲名・アーティスト
- シークバー
- 時間表示
- 前後・再生ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で前後・再生ボタンとシークバーに到達。シークバーで←→ 5秒・Home/End で端・Space/Enter で再生切替。ボタンは Enter/Space
- 支援技術
シークは role=slider＋aria-valuenow・aria-valuetext（時刻）。再生ボタンの aria-label は再生／一時停止に更新。ジャケットと EQ は aria-hidden。reduce で EQ を静止
- 動き
再生中は 5本の EQ バーが 0.62〜1.02s で伸縮。ノブは押下で 1.15 倍 120ms。進捗は rAF 更新。曲送りは即時
デザインの要点
- EQ の5本は周期を 0.62〜1.02s でばらす。同じ周期だと一斉に伸び縮みして波形ではなく点滅に見える
- 「前へ」は 3 秒以降なら曲頭へ戻り、それより前で前の曲へ。1回押しで戻り、2回押しで前の曲という音楽プレーヤーの慣習
- 再生ボタンだけ 52px の塗り、前後は 44px の透明。押す頻度の差を大きさと色で見せる
- 曲送りで cur を 0 に戻し aria-valuetext も更新する。総時間が曲ごとに違うので % だけでは位置が伝わらない
実装メモ
実際の音声は使わず、JSのタイマーで進捗を進める疑似再生です。実装時は <audio> 要素に置き換え、progress を timeupdate/currentTime、シークを currentTime、時間を duration に差し替えてください。ジャケットは linear-gradient のダミー表現です。
コード（コピーして使えます）
<div class="ap" id="ap">
<div class="ap-art" aria-hidden="true">
<div class="ap-art-glow"></div>
<div class="ap-eq" id="apEq">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<div class="ap-meta">
<p class="ap-title">真夜中のシグナル</p>
<p class="ap-artist">Lumina / Nightdrive</p>
</div>
<div
class="ap-seek"
id="apSeek"
role="slider"
tabindex="0"
aria-label="再生位置"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
aria-valuetext="0:00 / 4:12"
>
<div class="ap-track">
<div class="ap-fill" id="apFill"></div>
<div class="ap-knob" id="apKnob"></div>
</div>
</div>
<div class="ap-times">
<span id="apCur">0:00</span>
<span id="apDur">4:12</span>
</div>
<div class="ap-controls">
<button class="ap-btn" id="apPrev" type="button" aria-label="前の曲">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 5.5v13l-9-6.5 9-6.5z" fill="currentColor"/>
<rect x="6" y="5.5" width="2.4" height="13" rx="1" fill="currentColor"/>
</svg>
</button>
<button class="ap-btn ap-btn--play" id="apPlay" type="button" aria-label="再生">
<svg class="ap-ic-play" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M7 4.5v15l12-7.5-12-7.5z" fill="currentColor"/>
</svg>
<svg class="ap-ic-pause" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="6" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
<rect x="14" y="4.5" width="4" height="15" rx="1.2" fill="currentColor"/>
</svg>
</button>
<button class="ap-btn" id="apNext" type="button" aria-label="次の曲">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M6 5.5v13l9-6.5-9-6.5z" fill="currentColor"/>
<rect x="15.6" y="5.5" width="2.4" height="13" rx="1" fill="currentColor"/>
</svg>
</button>
</div>
</div>