JavaScript

レシピ

音声

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

音声ファイルの再生速度を通常よりも速くしたり、遅くする方法について解説します。

この記事のポイント

  • 音声ファイルの再生速度はaudio要素playbackRateプロパティで調整する
  • playbackRateプロパティに設定できる値の範囲はブラウザによって異なる

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

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

通常の速度は「1.0」、それ以上の値の場合は早く再生し、0.9から0.1の値はスロー再生になります。
0は再生が止まって一時停止と同じ状態になります。
また、-0.1以下の負の値を設定すると逆再生になります(2020年11月現在は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プロパティに設定できる値の許容範囲はブラウザによって異なります。
もし再生速度が極端に早かったり、遅い場合は通常再生になったり、自動的に消音設定になることがあります。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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