メディア・画像
オーディオプレーヤー
音楽プレーヤーカード。グラデーションのジャケット、曲名/アーティスト、再生・前後スキップ、ドラッグできる進捗バーと時間表示、再生中に揺れるイコライザーバーを備える。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
実際の音声は使わず、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"
>
<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" 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" 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" 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>