音声ファイルを逆再生する

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

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

通常の再生速度は「1.0」ですが、逆再生で通常の速度のときは「-0.1」を指定し、それより小さい値になるほど速い逆再生、「0」に近づくほどスローの逆再生になります。
音声ファイルの再生位置を戻すときに便利な機能ですが、2020年11月現在はPC版Safari、およびモバイル版ChromeとSafariのみ対応のため一般公開するときは注意が必要です。

以下の例は「巻き戻し 2倍速」「巻き戻し」「通常」の3つのボタンを用意して、それぞれのボタンを押すと再生速度を調整することができます。

サンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <audio type="audio/mpeg" src="./audio/bgm01.mp3" controls></audio>
  <button id="btn_reverse2">巻き戻し 2倍速</button>
  <button id="btn_reverse">巻き戻し</button>
  <button id="btn_normal">通常</button>
</article>

JavaScript コード例

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

  const audioElement = document.querySelector("audio");
  const btn_reverse = document.getElementById("btn_reverse");
  const btn_reverse2 = document.getElementById("btn_reverse2");
  const btn_normal = document.getElementById("btn_normal");

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

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

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

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

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

値が「-1.0」は通常速度の逆再生、「-2.0」は2倍速の逆再生、そして「1.0」は通常の再生です。

なお、playbackRateプロパティに設定できる負の値の範囲はブラウザによって異なるため注意してください。