audioタグを連続再生する時に気を付けるポイント
TOC
ブラウザ上で音を出力する
ブラウザ上で音を鳴らす方法の1つとして<audio>タグを使用する場合があると思います。
<button class="play">play</button>
<audio class="sound" src="./sounds/sound.mp3"></audio>JavaScriptで操作する場合はplayイベントを実行します。
document.querySelector(".play").addEventListener("click", () => {
const audio = document.querySelector(".sound");
audio.play();
});連続再生する
ただしこの方法ではplayボタンを連続でクリックしても1回ずつしか再生されません。
なぜなら<audio>タグの特製として、音源を重複して再生することができないからです。
（3秒の音源を再生したら、3秒待たなくてはならない）
この問題は、グローバル属性のcurrentTime を0に設定することで解決することができます。
document.querySelector(".play").addEventListener("click", () => {
const audio = document.querySelector(".sound");
audio.currentTime = 0; // 0に設定
audio.play();
});実際は重複再生ではなく連続再生という扱いなのですが、短い効果音の場合は上記の方法で違和感なく連続再生する事ができます。 ブラウザ上でゲームなどの効果音を再生する時に活用できる小ネタでした。
Search Posts