← 動的パーツギャラリーへ戻る

パーツ番号 07-03-05 ・ JavaScript使用

音声プレーヤーUI

波形バーと再生/一時停止ボタンの音声プレーヤー。ボタンクリックで再生状態になると波形が上下に動きます。WordPressのポッドキャスト紹介などに。

clickjs

プレビュー

ソースコード

HTML

<div class="d07-03-05-player">
          <button class="d07-03-05-toggle" aria-label="再生 / 一時停止">
            <svg class="d07-03-05-i-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            <svg class="d07-03-05-i-pause" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
          </button>
          <div class="d07-03-05-wave">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.prev.d07-03-05{background:#0f172a}
        .d07-03-05-player{display:flex;align-items:center;gap:16px;background:#1e293b;padding:18px 22px;border-radius:14px;
          box-shadow:0 10px 24px rgba(0,0,0,.4);max-width:340px;width:100%}
        .d07-03-05-toggle{flex:0 0 auto;width:48px;height:48px;border:none;border-radius:50%;background:#22d3ee;cursor:pointer;
          display:flex;align-items:center;justify-content:center}
        .d07-03-05-toggle svg{width:22px;height:22px;fill:#0f172a}
        .d07-03-05-i-pause{display:none}
        .d07-03-05-player.playing .d07-03-05-i-play{display:none}
        .d07-03-05-player.playing .d07-03-05-i-pause{display:block}
        .d07-03-05-wave{display:flex;align-items:center;gap:4px;height:40px;flex:1}
        .d07-03-05-wave span{flex:1;height:8px;background:#38bdf8;border-radius:2px;transform-origin:center}
        .d07-03-05-player.playing .d07-03-05-wave span{animation:d07-03-05-bounce 1s ease-in-out infinite}
        .d07-03-05-wave span:nth-child(2n){animation-delay:.15s}
        .d07-03-05-wave span:nth-child(3n){animation-delay:.3s}
        .d07-03-05-wave span:nth-child(5n){animation-delay:.45s}
        @keyframes d07-03-05-bounce{0%,100%{height:8px}50%{height:34px}}

JavaScript

(function(){
        var p=document.querySelector('#item-07-03-05 .d07-03-05-player'),
            b=p&&p.querySelector('.d07-03-05-toggle');
        if(!b)return;
        b.addEventListener('click',function(){p.classList.toggle('playing');});
      })();

クラス名 .d07-03-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。