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

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

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プロパティの値を変更して再生位置を進めたり戻すようにしています。
赤字の箇所が再生位置の調整に関するコードです。

サンプルページはこちら

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秒単位にしたいときは10を20に変更するだけで設定可能です。

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

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