音楽プレイヤー

ジャケット（グラデーション）・曲名・シークバー・再生／停止・キュー一覧のプレイヤー画面。シークバーはドラッグで移動でき、再生中は波形バーが揺れて曲が進む。

ENGLISH

Music Player

約159行画面のかたち / 実用サンプル: アプリ画面の一覧 →

プレビュー

ドラッグ

操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。

デザインの要点

ジャケットの色を画面の背景にうっすら流し、曲ごとに世界観を変える。UI 自体は無彩色に保つ
再生ボタンだけを白い円で強く、前後は線のアイコンで弱く。1 画面で押すべきものは 1 つ
シークバーはドラッグ中に太くなり、つまみが指の下に隠れない位置に時刻を出す
キューは「次に流れる順」で並べ、再生中の行だけ波形で示す。文字色を変えるより気づきやすい

プロのサイトでの実例

Spotify別サイト ↗ジャケット・曲情報・シークバー・キューという再生画面の基本構成の代表例

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

デモでは実時間の 8 倍速で曲が進みます（動きを見せるため）。実装では Audio 要素の timeupdate から currentTime / duration を読んで描画してください。

コード（コピーして使えます）

<div class="mp-app" id="mp-app">
  <section class="mp-now">
    <div class="mp-art" id="mp-art" aria-hidden="true"><span class="mp-art-glyph">♪</span></div>
    <div class="mp-info">
      <h1 class="mp-title" id="mp-title">夜明けのバス停</h1>
      <p class="mp-artist" id="mp-artist">Aoi Sato</p>
    </div>
    <div class="mp-seek" id="mp-seek" role="slider" aria-label="再生位置" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
      <div class="mp-seek-track"><div class="mp-seek-fill" id="mp-fill"></div><div class="mp-seek-thumb" id="mp-thumb"></div></div>
    </div>
    <div class="mp-times"><span id="mp-cur">0:00</span><span id="mp-dur">3:42</span></div>
    <div class="mp-controls">
      <button type="button" class="mp-ctl" id="mp-prev" aria-label="前の曲"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M6 5v14M18 6l-9 6 9 6z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></button>
      <button type="button" class="mp-play" id="mp-play" aria-label="再生" aria-pressed="false">
        <svg class="mp-ic-play" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
        <svg class="mp-ic-pause" viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z" fill="currentColor"/></svg>
      </button>
      <button type="button" class="mp-ctl" id="mp-next" aria-label="次の曲"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M18 5v14M6 6l9 6-9 6z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></button>
    </div>
  </section>
  <section class="mp-queue">
    <h2 class="mp-h2">次に再生</h2>
    <ol class="mp-list" id="mp-list"></ol>
  </section>
</div>