JavaScript

レシピ

音声

音声ファイルの再生をスキップする

音声ファイルの再生位置を指定した秒数だけスキップさせて、早送りや巻き戻しする方法について解説します。

この記事のポイント

  • audio要素の再生位置はcurrentTimeプロパティを参照する
  • currentTimeプロパティの値を変更すると再生位置を調整できる

音声ファイルの再生位置をスキップする

audio要素は現在の再生位置をcurrentTimeプロパティに数値の値として持っています。

currentTimeプロパティの値は浮動小数点数です。
音声ファイルの再生位置を取得してコンソールに出力すると以下のような値が表示されます。

コンソール出力例

4.368345
9.372399
14.368912
19.370124
24.367437

整数部分は秒数、小数点以下はミリ秒以下の時間を表します。
ただし、小数点以下はブラウザの種類やバージョンによって異なります。
2020年10月時点では、Chromeのv86.0.4240.75やFirefoxのv81.0.10.000 001秒)単位ですが、Safariのv14.0ではナノ秒(0.000 000 001秒)単位の値が入っています。
そのため、currentTimeプロパティの値を扱うときはマイクロ秒単位以上の数値を対象とすることをおすすめします。

今回は10秒単位で再生位置を進めたり、戻ることができるようにします。
以下の例は、音声の再生と一時停止に加えて「10秒前」ボタンと「10秒後」ボタンを設置して、それぞれのボタンを押したらcurrentTimeプロパティの値を変更して再生位置を進めたり戻すようにしています。
赤字の箇所が再生位置の調整に関するコードです。

サンプルページはこちら

Note

ここでは音声ファイルの再生/一時停止の実装については触れません。こちらについては別記事「音声ファイルの再生、一時停止を操作する」を参照してください。

HTML コード例

<audio type="audio/mpeg" src="./audio/bgm01.mp3"></audio>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>
<button id="btn_back">10秒前</button>
<button id="btn_forward">10秒後</button>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){
  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const btn_back = document.getElementById("btn_back");
  const btn_forward = document.getElementById("btn_forward");
  const audioElement = document.querySelector("audio");

  btn_play.addEventListener("click", e => {
    audioElement.play();
  });

  btn_pause.addEventListener("click", e => {
    audioElement.pause();
  });

  btn_back.addEventListener("click", e => {
    audioElement.currentTime -= 10;
  });

  btn_forward.addEventListener("click", e => {
    audioElement.currentTime += 10;
  });
});

id属性から「10秒前」ボタンと「10秒後」ボタンを取得して、それぞれクリックされたときに指定した処理を実行するようにイベントリスナーに登録します。

「10秒前」ボタンのbtn_backに対しては、audioElement.currentTimeの現在の再生位置から10を引いて10秒前の位置に設定します。

「10秒後」ボタンのbtn_forwardについては反対に再生位置を進めるため、audioElement.currentTimeの現在の再生位置に10を足して10秒後の位置に設定します。

このコードを実行して音声ファイルを再生してから上記2つのボタンを押すと、それぞれ再生位置を10秒単位で移動することができます。
もし5秒単位で移動させたい場合は上記の数値を10から5に、反対に20秒単位にしたいときは1020に変更するだけで設定可能です。

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

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

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