音声ファイルの再生速度を速くしたり遅くする

音声ファイルの再生速度について

音声ファイルの再生速度はaudio要素のplaybackRateプロパティに値を設定すると調整することができます。

通常の速度は「1.0」、それ以上の値の場合は早く再生し、0.9から0.1の値はスロー再生になります。
0は再生が止まって一時停止と同じ状態になります。
また、-0.1以下の負の値を設定すると逆再生になります（2023年07月現在はPC版Safari、モバイル版ChromeとSafariのみ対応）。

以下の例は「スロー」「通常」「早送り」「もっと早送り」の4つのボタンを用意して、それぞれのボタンを押すと再生速度を調整することができます。

サンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <audio type="audio/mpeg" src="./audio/bgm01.mp3" controls></audio>
  <button id="btn_slow">スロー</button>
  <button id="btn_normal">通常</button>
  <button id="btn_fast">早送り</button>
  <button id="btn_veryfast">もっと早送り</button>
</article>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const audioElement = document.querySelector("audio");
  const btn_slow = document.getElementById("btn_slow");
  const btn_normal = document.getElementById("btn_normal");
  const btn_fast = document.getElementById("btn_fast");
  const btn_veryfast = document.getElementById("btn_veryfast");

  btn_slow.addEventListener("click", (e) => {
    audioElement.playbackRate = 0.5;
  });

  btn_normal.addEventListener("click", (e) => {
    audioElement.playbackRate = 1.0;
  });

  btn_fast.addEventListener("click", (e) => {
    audioElement.playbackRate = 2.0;
  });

  btn_veryfast.addEventListener("click", (e) => {
    audioElement.playbackRate = 3.0;
  });
});

ページの読み込みが完了したタイミングでquerySelectorメソッドからaudio要素を取得して、変数audioElementに入れます。
それぞれのボタンについてはid属性を使って取得して対応する変数に入れておきます。

続いて、4つのボタンに対してクリックされたときに発生するイベント「click」をイベントリスナーに登録します。
クリックされたときには、audio要素のplaybackRateプロパティに対して再生速度の値を設定する処理のみ行います。

再生速度「0.5」は通常の半分の速度（スロー再生）、「2.0」は2倍速、「3.0」は3倍速です。

なお、playbackRateプロパティに設定できる値の許容範囲はブラウザによって異なります。
もし再生速度が極端に早かったり、遅い場合は通常再生になったり、自動的に消音設定になることがあります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。