Web Design Leaves

<div class="audio-controller">
  <audio src="sample.mp3"></audio>
  <div class="controls">
    <div class="row">
      <button class="toggle" type="button">Play</button>
      <div class="time"><span class="current-time">0:00</span></div>
      <input class="range-slider" type="range" name="seek" value="0" step=".1">
      <div class="time"><span class="duration">0:00</span></div>
    </div>
    <div class="row">
      <button class="mute" type="button">Mute</button>
      <input class="range-slider" type="range" name="vol" min="0.0" max="1.0" value="1.0" step=".1">
      <button class="loop" type="button">Loop</button>
    </div>
  </div>
</div>

.audio-controller {
  position: relative;
  margin: 50px 0;
  width: 100%;
  max-width: 320px;
  border: 1px solid #999;
  padding: 15px 10px;
  background-color: #555;
  color: #fff;
}
 
.audio-controller .controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
 
.audio-controller .controls .row {
  display: flex;
  gap: 10px;
}
 
.audio-controller .controls button {
  border: none;
  padding: .25rem .5rem;
  cursor: pointer;
  height: 32px;
  font-size: 12px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}
 
.audio-controller .controls button.toggle {
  width: 12rem;
  background-color: #3976d8;
}
 
.audio-controller .controls button.toggle.playing {
  width: 12rem;
  background-color: #e06602;
}
 
.audio-controller .controls button.mute {
  width: 7rem;
  background-color: #aa5353;
}
 
.audio-controller .controls button.mute.active {
  background-color: #f31e1e;
  font-size: 11px;
}
 
.audio-controller .controls .loop {
  width: 9rem;
  background-color: #1f6438;
}
 
.audio-controller .controls .loop.active {
  background-color: #739c32;
  color: #fff;
  font-size: 11px;
}
 
.audio-controller .controls .time {
  font-size: 12px;
  line-height: 36px;
}
 
/* レンジスライダー */
.audio-controller input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #ccc;
  margin-top: 14px;
}
 
/* スライダーのツマミ部分（webkit） */
.audio-controller input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background-color: #3976d8;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}
 
/* スライダーのツマミ部分（Firefox） */
.audio-controller input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #3976d8;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}
 
/* スライダーのツマミ部分のホバー、アクティブ、フォーカス（Webkit 用） */
audio-controller input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(248, 200, 245, 0.4)
}
.audio-controller input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)
}
.audio-controller input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)
}
/* スライダーのツマミ部分のホバー、アクティブ、フォーカス（Firfox 用） */
.audio-controller input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 8px rgba(248, 200, 245, .4)
}
.audio-controller input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)
}
.audio-controller input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)
}

document.addEventListener('DOMContentLoaded', () => {
 
  const audioControllers = document.querySelectorAll('.audio-controller');
 
  audioControllers.forEach((audioController) => {
 
    // .audio-controller 内の audio 要素を取得
    const audio = audioController.querySelector('audio');
    // 念のため controls に false を指定して確実に非表示に
    audio.controls = false;
    // 初期ボリューム（デフォルトは 1。必要に応じて変更できます）
    audio.volume = 0.8;
    // iPhone 対策
    audio.preload = 'metadata';
 
    // トグルボタン（再生・停止ボタン）
    const toggleBtn = audioController.querySelector('.toggle');
    // 現在の再生位置（時間）を表示する要素
    const ctSpan = audioController.querySelector('.time .current-time');
    // 現在の再生位置（時間）を hh:mm:ss に変換して表示
    ctSpan.textContent = secToHMS(audio.currentTime);
    // 再生時間を表示する要素
    const durSpan = audioController.querySelector('.time .duration');
 
    // ループボタン
    const loopBtn = audioController.querySelector('.loop');
    loopBtn.addEventListener('click', () => {
      // loop が有効であれば
      if (audio.loop) {
        // loop を無効にしてテキストと背景色を変更
        audio.loop = false;
        loopBtn.textContent = 'Loop'
        loopBtn.classList.remove('active');
      } else {
        // loop が無効であれば有効にしてテキストと背景色を変更
        audio.loop = true;
        loopBtn.textContent = 'Unloop'
        loopBtn.classList.add('active');
      }
    });
 
    // ボリュームスライダー
    const volumeBar = audioController.querySelector('input[name="vol"]');
    // スライダーの値に現在の volume の値（初期値）を設定
    volumeBar.value = audio.volume;
    // スライダーの値が変更されたら
    volumeBar.addEventListener('input', (e) => {
      // スライダーの値に現在の値を設定
      audio.volume = e.currentTarget.value;
      // ミュート中であればミュートを解除
      if (audio.muted) {
        audio.muted = false;
      }
    });
 
    // ミュートボタン
    const muteBtn = audioController.querySelector('.mute');
    // ミュートボタンがクリックされたら
    muteBtn.addEventListener('click', () => {
      // ミュート中であれば
      if (audio.muted) {
        // ミュートを解除
        audio.muted = false;
        // ボリュームバーの位置を更新
        volumeBar.value = audio.volume;
        // ボリュームバーのトラックの色を更新
        updateSlider(volumeBar);
        // ミュートボタンのテキストを変更
        muteBtn.textContent = 'Mute';
        // ミュートボタンの背景色を変更
        muteBtn.classList.remove('active');
      } else {
        audio.muted = true;
        volumeBar.value = 0;
        updateSlider(volumeBar);
        muteBtn.textContent = 'Unmute';
        muteBtn.classList.add('active');
      }
    });
 
    // ミュート状態の変更を検出
    // 独自コントロールと audio 要素のコントロールを同期するための処理
    audio.addEventListener('volumechange', (e) => {
      if (e.currentTarget.muted) {
        volumeBar.value = 0;
        updateSlider(volumeBar);
        muteBtn.textContent = 'Unmute';
        muteBtn.classList.add('active');
      } else {
        volumeBar.value = audio.volume;
        updateSlider(volumeBar);
        muteBtn.textContent = 'Mute';
        muteBtn.classList.remove('active');
      }
    }, false);
 
    // シークバー
    const seekBar = audioController.querySelector('input[name="seek"]');
    // シークバーの値が変更されたら
    seekBar.addEventListener('input', (e) => {
      //再生位置を変更された値に設定
      audio.currentTime = e.currentTarget.value;
    });
 
    // 再生時間（音声データの長さ）
    let duration;
    // メタデータの読み込みが完了した時点で再生時間を取得
    audio.addEventListener('loadedmetadata', () => {
      duration = audio.duration;
      // 再生時間を hh:mm:ss に変換して表示
      durSpan.textContent = secToHMS(Math.floor(duration));
      // シークバー（レンジ入力欄）の max 属性に再生時間を設定
      seekBar.setAttribute('max', Math.floor(duration));
    });
 
    // currentTime プロパティの値が更新される際に発火するイベント
    audio.addEventListener('timeupdate', updateTime, false);
 
    function updateTime() {
      const cTime = audio.currentTime;
      // 現在の再生位置（時間）の表示を更新
      ctSpan.textContent = secToHMS(Math.floor(cTime));
      // シークバーの現在の再生位置を更新
      seekBar.value = cTime;
      // シークバーの塗り色を更新
      updateSlider(seekBar);
    }
 
    // トグルボタンのクリックイベント
    toggleBtn.addEventListener('click', togglePlayPause, false);
 
    // トグルボタンのリスナー関数
    function togglePlayPause() {
      // 停止中であれば
      if (audio.paused) {
        // 再生用関数 playAudio() を呼び出す
        playAudio();
      } else {
        // 再生中であれば停止（ボタンのラベルと背景色は pause イベントで変更）
        audio.pause();
      }
    }
 
    // 音声データを再生する非同期関数（Async Function）
    async function playAudio() {
      try {
        // await を指定して Promise が確定するまで待ちます
        await audio.play();
        // Promise が解決されたらボタンのテキストを変更し、クラスを追加
        toggleBtn.textContent = 'Pause';
        toggleBtn.classList.add('playing');
      } catch (err) {
        // 再生できなければ（クラスが追加されていれば）クラスを削除
        toggleBtn.classList.remove('playing');
        // コンソールにエラーを出力
        console.warn(err);
      }
    }
 
    // pause イベントのリスナー（ボタンのラベルと背景色を変更）
    audio.addEventListener('pause', () => {
      toggleBtn.textContent = 'Play';
      toggleBtn.classList.remove('playing');
    });
 
    // 再生終了時に発火するイベント
    audio.addEventListener('ended', audioEnded, false);
    // 再生終了時に呼び出す関数
    function audioEnded() {
      // ボタンのテキストを Pause から Play に変更してクラスを削除（色を変更）
      toggleBtn.textContent = 'Play';
      toggleBtn.classList.remove('playing');
      // 再生位置を先頭に戻す（必要に応じて）
      audio.currentTime = 0;
    }
 
    // レンジスライダー
    const rangeSliders = audioController.querySelectorAll('.range-slider');
 
    rangeSliders.forEach((slider) => {
      // レンジスライダーの input イベントに別途定義した関数 updateSlider を設定
      slider.addEventListener('input', (e) => {
        updateSlider(e.target);
      });
      // 初期状態に現在の状態を反映
      updateSlider(slider);
    });
 
    // play イベントのリスナー（ボタンのラベルと背景色を変更）
    // 独自コントロールと audio 要素のコントロールを同期するための処理
    audio.addEventListener('play', (e) => {
      toggleBtn.textContent = 'Pause';
      toggleBtn.classList.add('playing');
    });
  });
 
  /**
  * 秒数を引数に受け取り hh:mm:ss に変換する関数
  * @param {Number}  seconds 秒数
  */
  function secToHMS(seconds) {
    const hour = Math.floor(seconds / 3600);
    const min = Math.floor(seconds % 3600 / 60);
    const sec = seconds % 60;
    let hh;
    // 3桁未満ならゼロパディング
    if (hour < 100) {
      hh = (`00${hour}`).slice(-2);
    } else {
      hh = hour;
    }
    // mm:ss の形式にするためゼロパディング
    const mm = (`00${min}`).slice(-2);
    const ss = (`00${sec}`).slice(-2);
    let time = '';
    if (hour !== 0) {
      // 1時間以上であれば hh:mm:ss
      time = `${hh}:${mm}:${ss}`;
    } else {
      // 1時間未満であれば mm:ss
      time = `${mm}:${ss}`;
    }
    return time;
  }
 
  /**
  * レンジスライダーのトラックの塗りの範囲と色を更新する関数
  * @param {HTMLElement}  slider レンジスライダー（input type="range"）
  * @param {String}  bgc ベースとなるトラックの背景色（デフォルト #ccc）
  * @param {String}  color 変化する領域（ツマミの左側）の背景色（デフォルト #8ea8f9）
  */
  function updateSlider(slider, bgc = '#ccc', color = '#8ea8f9') {
    if (!slider.max) {
      // max 属性が設定されていなければ 100 を設定
      slider.max = 100;
    }
    // 現在の値から割合（%）を取得
    const progress = (slider.value / slider.max) * 100;
    // linear-gradient でトラックの背景色の領域を引数の色で更新
    slider.style.background =
      `linear-gradient(to right, ${color} ${progress}%, ${bgc} ${progress}%)`;
  }
 
  // 再生を開始すると、他に再生中のものがあれば停止（必要に応じて設定）
  /* document.addEventListener('play', (e) => {
    const audios = document.querySelectorAll('audio');
    audios.forEach((audio) => {
      if (audio !== e.target) {
        audio.pause();
      }
    });
  }, true); */
 
});

<audio class="js-audio" src="sample.mp3"></audio>

document.addEventListener('DOMContentLoaded', () => {
 
  // js-audio クラスの audio 要素を全て取得
  const jsAudios = document.querySelectorAll('.js-audio');
 
  // 上記で取得した各要素を関数に渡して実行
  jsAudios.forEach((audio) => {
    // 対象の audio 要素をカスタムプレーヤーで表示
    createAudioController(audio);
  });
 
  // id が foo の要素を取得
  const foo = document.getElementById('foo');
  // 関数に渡して実行（引数に背景色とボリュームの初期値を指定）
  createAudioController(foo, 'yellow', 'pink', 0.8);
 
  /**
  * audio 要素をカスタマイズしたコントロールで表示する関数
  * 別途定義した関数 secToHMS() と updateSlider() が必要
  * @param {HTMLElement}  audio （カスタムプレーヤーで表示する audio 要素 ※必須）
  * @param {String}  bgc スライダー部分のトラックの背景色（省略時は #ccc）
  * @param {String}  color スライダー部分の変化する領域の背景色（省略時は #8ea8f9）
  * @param {Float}  vol 初期ボリューム。0.0〜1.0 の範囲で指定（省略時は 1.0）
  */
  function createAudioController(audio, bgc, color, vol = 1.0) {
 
    // 引数の audio が存在しない場合や audio 要素でなければ終了
    if (!audio || audio.tagName !== 'AUDIO') {
      return;
    }
 
    const audioController = document.createElement('div');
    audioController.className = 'audio-controller';
    audio.parentNode.insertBefore(audioController, audio);
    audioController.appendChild(audio);
 
    const controls = `<div class="controls">
      <div class="row">
        <button class="toggle" type="button">Play</button>
        <div class="time"><span class="current-time">0:00</span></div>
        <input class="range-slider" type="range" name="seek" value="0" step=".1">
        <div class="time"><span class="duration">0:00</span></div>
      </div>
      <div class="row">
        <button class="mute" type="button">Mute</button>
        <input class="range-slider" type="range" name="vol" min="0.0" max="1.0" value="1.0" step=".1">
        <button class="loop" type="button">Loop</button>
      </div>
    </div>`;
 
    audioController.insertAdjacentHTML('beforeend', controls);
    audio.controls = false;
 
    // 引数の vol を volume に設定
    audio.volume = vol;
    audio.preload = 'metadata';
 
    const toggleBtn = audioController.querySelector('.toggle');
    const ctSpan = audioController.querySelector('.time .current-time');
    ctSpan.textContent = secToHMS(audio.currentTime);
    const durSpan = audioController.querySelector('.time .duration');
    const loopBtn = audioController.querySelector('.loop');
 
    if (!audio.loop) {
      audio.loop = false;
      loopBtn.textContent = 'Loop'
      loopBtn.classList.remove('active');
    } else {
      audio.loop = true;
      loopBtn.textContent = 'Unloop'
      loopBtn.classList.add('active');
    }
 
    loopBtn.addEventListener('click', () => {
      if (audio.loop) {
        audio.loop = false;
        loopBtn.textContent = 'Loop'
        loopBtn.classList.remove('active');
      } else {
        audio.loop = true;
        loopBtn.textContent = 'Unloop'
        loopBtn.classList.add('active');
      }
    });
 
    const volumeBar = audioController.querySelector('input[name="vol"]');
    volumeBar.value = audio.volume;
    volumeBar.addEventListener('input', (e) => {
      audio.volume = e.currentTarget.value;
      if (audio.muted) {
        audio.muted = false;
      }
    });
    const muteBtn = audioController.querySelector('.mute');
 
    if (!audio.muted) {
      audio.muted = false;
      volumeBar.value = audio.volume;
      // 背景色の引数を追加
      updateSlider(volumeBar, bgc, color);
      muteBtn.textContent = 'Mute';
      muteBtn.classList.remove('active');
    } else {
      audio.muted = true;
      volumeBar.value = 0;
      // 背景色の引数を追加
      updateSlider(volumeBar, bgc, color);
      muteBtn.textContent = 'Unmute';
      muteBtn.classList.add('active');
    }
 
    muteBtn.addEventListener('click', () => {
      if (audio.muted) {
        audio.muted = false;
        volumeBar.value = audio.volume;
        // 背景色の引数を追加
        updateSlider(volumeBar, bgc, color);
        muteBtn.textContent = 'Mute';
        muteBtn.classList.remove('active');
      } else {
        audio.muted = true;
        volumeBar.value = 0;
        // 背景色の引数を追加
        updateSlider(volumeBar, bgc, color);
        muteBtn.textContent = 'Unmute';
        muteBtn.classList.add('active');
      }
    });
 
    audio.addEventListener('volumechange', (e) => {
      if (e.currentTarget.muted) {
        volumeBar.value = 0;
        // 背景色の引数を追加
        updateSlider(volumeBar, bgc, color);
        muteBtn.textContent = 'Unmute';
        muteBtn.classList.add('active');
      } else {
        volumeBar.value = audio.volume;
        // 背景色の引数を追加
        updateSlider(volumeBar, bgc, color);
        muteBtn.textContent = 'Mute';
        muteBtn.classList.remove('active');
      }
    }, false);
 
    const seekBar = audioController.querySelector('input[name="seek"]');
    seekBar.addEventListener('input', (e) => {
      audio.currentTime = e.currentTarget.value;
    });
 
    let duration;
    audio.addEventListener('loadedmetadata', () => {
      duration = audio.duration;
      durSpan.textContent = secToHMS(Math.floor(duration));
      seekBar.setAttribute('max', Math.floor(duration));
    });
 
    audio.addEventListener('timeupdate', updateTime, false);
    function updateTime() {
      const cTime = audio.currentTime;
      ctSpan.textContent = secToHMS(Math.floor(cTime));
      seekBar.value = cTime;
      // 背景色の引数を追加
      updateSlider(seekBar, bgc, color);
    }
 
    toggleBtn.addEventListener('click', togglePlayPause, false);
    function togglePlayPause() {
      if (audio.paused) {
        playAudio();
      } else {
        audio.pause();
      }
    }
 
    async function playAudio() {
      try {
        await audio.play();
        toggleBtn.textContent = 'Pause';
        toggleBtn.classList.add('playing');
      } catch (err) {
        toggleBtn.classList.remove('playing');
        console.warn(err);
      }
    }
 
    audio.addEventListener('pause', () => {
      toggleBtn.textContent = 'Play';
      toggleBtn.classList.remove('playing');
    });
 
    audio.addEventListener('ended', audioEnded, false);
    function audioEnded() {
      toggleBtn.textContent = 'Play';
      toggleBtn.classList.remove('playing');
      audio.currentTime = 0;
    }
 
    const rangeSliders = audioController.querySelectorAll('.range-slider');
    rangeSliders.forEach((slider) => {
      slider.addEventListener('input', (e) => {
        // 背景色の引数を追加
        updateSlider(e.target, bgc, color);
      });
      // 背景色の引数を追加
      updateSlider(slider, bgc, color);
    });
 
    audio.addEventListener('play', (e) => {
      toggleBtn.textContent = 'Pause';
      toggleBtn.classList.add('playing');
    });
  };
 
  /**
   * 秒数を引数に受け取り hh:mm:ss に変換する関数（前述の例と同じ）
   */
  function secToHMS(seconds) {
    const hour = Math.floor(seconds / 3600);
    const min = Math.floor(seconds % 3600 / 60);
    const sec = seconds % 60;
    let hh;
    if (hour < 100) {
      hh = (`00${hour}`).slice(-2);
    } else {
      hh = hour;
    }
    const mm = (`00${min}`).slice(-2);
    const ss = (`00${sec}`).slice(-2);
    let time = '';
    if (hour !== 0) {
      time = `${hh}:${mm}:${ss}`;
    } else {
      time = `${mm}:${ss}`;
    }
    return time;
  }
 
  /**
  * レンジスライダーのトラックの塗りの範囲と色を更新する関数（前述の例と同じ）
  */
  function updateSlider(slider, bgc = '#ccc', color = '#8ea8f9') {
    if (!slider.max) {
      slider.max = 100;
    }
    const progress = (slider.value / slider.max) * 100;
    slider.style.background = `linear-gradient(to right, ${color} ${progress}%, ${bgc} ${progress}%)`;
  }
 
  // 再生を開始すると、他に再生中のものがあれば停止（必要に応じて設定）
  document.addEventListener('play', (e) => {
    const audios = document.querySelectorAll('audio');
    audios.forEach((audio) => {
      if (audio !== e.target) {
        audio.pause();
      }
    });
  }, true);
});

<audio class="js-audio" src="sample.mp3"></audio>
 
<audio id="foo">
  <source src="sample.mp3">
</audio>

<div class="audio-player">
  <div class="controls">
    <button class="toggle play-btn" type="button" aria-label="Play"></button>
    <div class="time" role="timer">
      <span class="current-time">00:00</span>
    </div>
    <input class="range-slider" type="range" name="seek" value="0" step=".1" aria-label="seek bar" max="31">
    <div class="time" role="timer">
      <span class="duration">00:31</span>
    </div>
    <button class="mute volume-btn" type="button" aria-label="Mute"></button>
    <input class="range-slider" type="range" name="vol" min="0.0" max="1.0" value="1.0" step=".1" aria-label="volume bar">
    <button class="loop loop-btn" type="button" aria-label="Loop"></button>
  </div>
  <audio class="js-audio" src="sample.mp3" preload="metadata"></audio>
</div>

.audio-player {
  position: relative;
  margin: 50px 0;
  width: 100%;
  max-width: 420px;
  padding: 10px;
  background-color: #0d023a;
  color: #fff;
  border-radius: 29px;
}
 
.audio-player .controls {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  /* 垂直方向中央揃え */
  align-items: center;
}
 
.audio-player .controls button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}
 
.audio-player .controls button.play-btn,
.audio-player .controls button.volume-btn {
  margin-right: -20px;
  padding-right: 10px;
}
 
.audio-player input[name="vol"] {
  /* 480 未満では非表示 */
  display: none;
}
 
@media screen and (min-width: 480px) {
  .audio-player {
    padding: 10px 10px;
  }
 
  .audio-player .controls {
    gap: 10px;
  }
 
  .audio-player input[name="vol"] {
    display: block;
  }
}
 
/* レンジスライダー */
.audio-player input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #ccc;
}
 
.audio-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 15px;
  background-color: #3976d8;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}
 
.audio-player input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #3976d8;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}
 
.audio-player input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(251, 255, 0, 0.3)
}
 
.audio-player input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(251, 255, 0, .4)
}
 
.audio-player input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(251, 255, 0, .4)
}
 
.audio-player input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 8px rgba(251, 255, 0, .3)
}
 
.audio-player input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(251, 255, 0, .4)
}
 
.audio-player input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(251, 255, 0, .4)
}
 
/* ボタンに挿入する疑似要素の共通設定 */
.audio-player .controls button::before {
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: -10px;
  margin-right: 8px;
  background-repeat: no-repeat;
}
 
/* ボタンによって異なる大きさや位置の個別の設定 */
.audio-player .controls button.loop-btn::before {
  height: 20px;
  width: 20px;
  vertical-align: -4px;
}
 
.audio-player .controls .time {
  font-size: 12px;
  line-height: 36px;
}
 
/* ボタンに表示する SVG アイコン*/
/* Play ボタン*/
.audio-player button.play-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}
 
/* Pause ボタン */
.audio-player button.play-btn.playing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3C/svg%3E");
}
 
/* Mute ボタン */
.audio-player button.volume-btn.muted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f74848' viewBox='0 0 16 16'%3E  %3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
 
.audio-player button.volume-btn.muted {
  transform: scale(1.1);
}
 
/* Volume ボタン */
.audio-player button.volume-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z'/%3E  %3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z'/%3E  %3Cpath d='M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z'/%3E%3C/svg%3E");
}
 
/* Loop ボタン */
.audio-player button.loop-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}
 
/* Loop ボタン (Active) */
.audio-player button.loop-btn.looped::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fbf704' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}
 
.audio-player button.loop-btn.looped {
  transform: scale(1.1);
}

document.addEventListener('DOMContentLoaded', () => {
 
  // js-audio クラスの audio 要素を全て取得
  const jsAudios = document.querySelectorAll('.js-audio');
 
  // 上記で取得した各要素を関数 createAudioPlayer() に渡して実行
  jsAudios.forEach((audio) => {
    // 対象の audio 要素をカスタムプレーヤーで表示
    createAudioPlayer(audio);
  });
 
  // id が foo の要素を取得
  const foo = document.getElementById('foo');
  // 関数に渡して実行（引数に背景色とボリュームの初期値を指定）
  createAudioPlayer(foo, 'yellow', 'pink', 0.8);
 
  /* 以下カスタムプレーヤーを表示する関数の定義   */
 
  /**
  * カスタムプレーヤーを表示する関数
  * 別途定義した関数 secToHMS() と updateSlider() が必要
  * @param {HTMLElement}  audio （カスタムプレーヤーで表示する audio 要素 ※必須）
  * @param {String}  bgc スライダー部分のトラックの背景色（省略時は #ccc）
  * @param {String}  color スライダー部分の変化する領域の背景色（省略時は #8ea8f9）
  * @param {Float}  vol 初期ボリューム。0.0〜1.0 の範囲で指定（省略時は 1.0）
  */
  function createAudioPlayer(audio, bgc, color, vol = 1.0) {
 
    // 第1引数の audio が存在しない場合やそれが audio 要素でなければ終了
    if (!audio || audio.tagName !== 'AUDIO') {
      return;
    }
 
    // オーディオプレーヤーをラップする div 要素（ラッパー）を作成
    const audioPlayer = document.createElement('div');
    // クラス属性を付与
    audioPlayer.className = 'audio-player';
    // audio 要素の前にラッパーを挿入
    audio.parentNode.insertBefore(audioPlayer, audio);
    // audio 要素をラッパーに追加
    audioPlayer.appendChild(audio);
 
    // コントロール部分の HTML
    const controls = `<div class="controls">
    <button class="toggle play-btn" type="button" aria-label="Play"></button>
    <div class="time" role="timer">
      <span class="current-time">0:00</span>
    </div>
    <input class="range-slider" type="range" name="seek" value="0" step=".1" aria-label="seek bar">
    <div class="time" role="timer">
      <span class="duration">0:00</span>
    </div>
    <button class="mute volume-btn" type="button" aria-label="Mute"></button>
    <input class="range-slider" type="range" name="vol" min="0.0" max="1.0" value="1.0" step=".1" aria-label="volume bar">
    <button class="loop loop-btn" type="button" aria-label="Loop"></button>
  </div>`;
 
    // コントロール部分を insertAdjacentHTML でラッパーに追加
    audioPlayer.insertAdjacentHTML('afterbegin', controls);
    // audio 要素を非表示に
    audio.controls = false;
 
    // 引数の vol を volume に設定
    audio.volume = vol;
    // iPhone 対策
    audio.preload = 'metadata';
 
    // トグルボタン（再生・停止ボタン）
    const toggleBtn = audioPlayer.querySelector('.toggle');
    // 現在の再生位置（時間）を表示する要素
    const ctSpan = audioPlayer.querySelector('.time .current-time');
    // 現在の再生位置（時間）を hh:mm:ss に変換して表示
    ctSpan.textContent = secToHMS(audio.currentTime);
    // 再生時間を表示する要素
    const durSpan = audioPlayer.querySelector('.time .duration');
 
    // ループボタン
    const loopBtn = audioPlayer.querySelector('.loop');
 
    // ループボタンがクリックされた際の処理
    loopBtn.addEventListener('click', () => {
      if (audio.loop) {
        audio.loop = false;
        loopBtn.classList.remove('looped');
        loopBtn.setAttribute('aria-label', 'Loop');
      } else {
        audio.loop = true;
        loopBtn.classList.add('looped');
        loopBtn.setAttribute('aria-label', 'Unloop');
      }
    });
 
    // 記述されている audio 要素の loop 属性の値をループボタンに反映
    if (!audio.loop) {
      audio.loop = false;
      loopBtn.classList.remove('looped');
      loopBtn.setAttribute('aria-label', 'Loop');
    } else {
      audio.loop = true;
      loopBtn.classList.add('looped');
      loopBtn.setAttribute('aria-label', 'Unloop');
    }
 
    // ボリュームスライダー
    const volumeBar = audioPlayer.querySelector('input[name="vol"]');
    // スライダーの値に現在の volume の値（初期値）を設定
    volumeBar.value = audio.volume;
    // スライダーの値が変更されたら
    volumeBar.addEventListener('input', (e) => {
      // スライダーの値に現在の値を設定
      audio.volume = e.currentTarget.value;
      // ミュート中であればミュートを解除
      if (audio.muted) {
        audio.muted = false;
        muteBtn.classList.remove('muted');
        muteBtn.setAttribute('aria-label', 'Mute');
      }
    });
 
    // ミュートボタン
    const muteBtn = audioPlayer.querySelector('.mute');
 
    // ミュートボタンがクリックされた際の処理
    muteBtn.addEventListener('click', () => {
      // ミュート中であれば
      if (audio.muted) {
        // ミュートを解除
        audio.muted = false;
        // ボリュームバーの位置を更新
        volumeBar.value = audio.volume;
        // ボリュームバーの背景色を更新
        updateSlider(volumeBar, bgc, color);
        // ミュートボタンの背景色を変更
        muteBtn.classList.remove('muted');
        // ミュートボタンの aria-label 属性の値を変更
        muteBtn.setAttribute('aria-label', 'Mute');
      } else {
        // ミュートする
        audio.muted = true;
        // ボリュームバーの位置を0に
        volumeBar.value = 0;
        // ボリュームバーの背景色を更新
        updateSlider(volumeBar, bgc, color);
        muteBtn.classList.add('muted');
        muteBtn.setAttribute('aria-label', 'Unmute');
      }
    });
 
    // 記述されている audio 要素の muted 属性の値を反映
    if (!audio.muted) {
      audio.muted = false;
      volumeBar.value = audio.volume;
      updateSlider(volumeBar, bgc, color);
      muteBtn.classList.remove('muted');
      muteBtn.setAttribute('aria-label', 'Mute');
    } else {
      audio.muted = true;
      volumeBar.value = 0;
      updateSlider(volumeBar, bgc, color);
      muteBtn.classList.add('muted');
      muteBtn.setAttribute('aria-label', 'Unmute');
    }
 
    // ミュート状態の変更を検出
    // 独自コントロールと audio 要素のコントロールを同期するための処理
    audio.addEventListener('volumechange', (e) => {
      // ボリュームが変更されてミュート状態であれば
      if (e.currentTarget.muted) {
        // ボリュームバーの値を0に
        volumeBar.value = 0;
        // ボリュームバーの背景色を更新
        updateSlider(volumeBar, bgc, color);
        muteBtn.classList.add('muted');
        muteBtn.setAttribute('aria-label', 'Unmute');
      } else {
        // ボリュームバーの値を現在の volue の値に
        volumeBar.value = audio.volume;
        // ボリュームバーの背景色を更新
        updateSlider(volumeBar, bgc, color);
        muteBtn.classList.remove('muted');
        muteBtn.setAttribute('aria-label', 'Mute');
      }
    }, false);
 
    // シークバー（再生位置を表すレンジ入力欄のスライダー）
    const seekBar = audioPlayer.querySelector('input[name="seek"]');
    // シークバーの値が変更されたら
    seekBar.addEventListener('input', (e) => {
      //再生位置を変更された値に更新
      audio.currentTime = e.currentTarget.value;
    });
 
    // 再生時間（音声データの長さ）
    let duration;
    // メタデータの読み込みが完了した時点（loadedmetadata）で再生時間を取得
    audio.addEventListener('loadedmetadata', () => {
      duration = audio.duration;
      // 再生時間を hh:mm:ss に変換して表示
      durSpan.textContent = secToHMS(Math.floor(duration));
      // シークバー（レンジ入力欄）の max 属性に再生時間を設定
      seekBar.setAttribute('max', Math.floor(duration));
    });
 
    // currentTime プロパティの値が更新される際のリスナーの登録
    audio.addEventListener('timeupdate', updateTime, false);
    function updateTime() {
      const cTime = audio.currentTime;
      // 現在の再生位置（時間）の表示を更新
      ctSpan.textContent = secToHMS(Math.floor(cTime));
      // シークバーの現在の再生位置を更新
      seekBar.value = cTime;
      // シークバーの塗り色を更新
      updateSlider(seekBar, bgc, color);
    }
 
    // トグルボタンのクリックイベントのリスナーの登録
    toggleBtn.addEventListener('click', togglePlayPause, false);
    function togglePlayPause() {
      // 停止中であれば
      if (audio.paused) {
        // 再生用関数 playAudio() を呼び出す
        playAudio();
      } else {
        // 再生中であれば停止（ボタンのラベルと背景色は pause イベントで変更）
        audio.pause();
      }
    }
 
    // 音声データを再生する関数（Async Function）
    async function playAudio() {
      try {
        // await を指定（Promise が確定するまで待つ）
        await audio.play();
        // Promise が解決されたらボタンの aria-label の値を変更し、クラスを追加
        toggleBtn.classList.add('playing');
        toggleBtn.setAttribute('aria-label', 'Pause');
      } catch (err) {
        // 再生が失敗し、クラスが追加されていればクラスを削除
        toggleBtn.classList.remove('playing');
        // コンソールにエラーを出力
        console.warn(err)
      }
    }
 
    // pause イベントのリスナー（ボタンのラベルと背景色を変更）
    audio.addEventListener('pause', () => {
      toggleBtn.classList.remove('playing');
      toggleBtn.setAttribute('aria-label', 'Play');
    });
 
    // play イベントのリスナー（ボタンのラベルと背景色を変更）
    // 独自コントロールと audio 要素のコントロールを同期するための処理
    audio.addEventListener('play', (e) => {
      toggleBtn.classList.add('playing');
      toggleBtn.setAttribute('aria-label', 'Pause');
    });
 
    // 再生終了時に発火する ended イベントのリスナー登録
    audio.addEventListener('ended', audioEnded, false);
    function audioEnded() {
      toggleBtn.classList.remove('playing');
      toggleBtn.setAttribute('aria-label', 'Play');
      // 再生位置を先頭に戻す場合は以下のコメントを外す
      //audio.currentTime = 0;
    }
 
    // ボリュームと再生位置のレンジスライダー（レンジ入力欄の背景色を設定）を取得
    const rangeSliders = audioPlayer.querySelectorAll('.range-slider');
    // レンジスライダーの input イベントに別途定義した関数 updateSlider を設定
    rangeSliders.forEach((slider) => {
      slider.addEventListener('input', (e) => {
        // 背景色を更新
        updateSlider(e.target, bgc, color);
      });
      // 初期状態に現在の状態での背景色を反映
      updateSlider(slider, bgc, color);
    });
  };
 
  /**
   * 秒数を引数に受け取り hh:mm:ss に変換する関数
   * @param {Number}  seconds 秒数
   */
  function secToHMS(seconds) {
    const hour = Math.floor(seconds / 3600);
    const min = Math.floor(seconds % 3600 / 60);
    const sec = seconds % 60;
    let hh;
    if (hour < 100) {
      hh = (`00${hour}`).slice(-2);
    } else {
      hh = hour;
    }
    const mm = (`00${min}`).slice(-2);
    const ss = (`00${sec}`).slice(-2);
    let time = '';
    if (hour !== 0) {
      time = `${hh}:${mm}:${ss}`;
    } else {
      time = `${mm}:${ss}`;
    }
    return time;
  }
 
  /**
  * レンジスライダーのトラックの塗りの範囲と色を更新する関数
  * @param {HTMLElement}  slider レンジスライダー（input type="range"）
  * @param {String}  bgc ベースとなるトラックの背景色（デフォルト #ccc）
  * @param {String}  color 変化する領域（ツマミの左側）の背景色（デフォルト #8ea8f9）
  */
  function updateSlider(slider, bgc = '#ccc', color = '#8ea8f9') {
    if (!slider.max) {
      slider.max = 100;
    }
    const progress = (slider.value / slider.max) * 100;
    slider.style.background = `linear-gradient(to right, ${color} ${progress}%, ${bgc} ${progress}%)`;
  }
 
  /**
  * プレーヤーが開始されると、他のプレーヤーを一時停止させる関数
  * @param {String}  selector audio 要素の CSS セレクタ名（デフォルト audio 要素）
  */
  function pauseOtherAudioPlayers(selector = 'audio') {
    // ドキュメントの play イベント
    document.addEventListener('play', (e) => {
      // 全ての selector で指定された要素を取得
      const audios = document.querySelectorAll(selector);
      // それぞれの audio 要素で以下を実行
      audios.forEach((audio) => {
        // audio が存在しない場合やそれが audio 要素でなければ終了（audio 要素とは限らない）
        if (!audio || audio.tagName !== 'AUDIO') {
          return;
        }
        // play イベントが発生した要素が自身でなければ停止
        if (audio !== e.target) {
          audio.pause();
        }
      });
    }, true);
  }
 
  //プレーヤーを開始すると、他のプレーヤーを一時停止（不要であれば以下をコメントアウトまたは削除）
  pauseOtherAudioPlayers()
});