【JavaScript】Audioオブジェクトを再生停止する

最近、JavaScriptのAudioオブジェクトを使って音楽再生するコードを書いてるんですが、再生と停止を繰り返す中で気付いたことがあります。なんかね、ただ止めただけでは他の曲を再生したときにオブジェクトが重複して作られちゃうことがあるんですよね。なんだろう。

let audio = new Audio()
audio.play()
audio.pause()

pause() メソッドを使うと再生が停止されますが、再生時間は変わらないので、もう一度再生すると途中から再生が再開されます。なので、停止する時には現在の再生時間も戻しましょう、とよく書かれてます。

let audio = new Audio()
audio.play()
audio.pause()
audio.currentTime = 0

確かにこれで停止されるんですけど、この状態で他のソースを読み込んで再生すると、なぜか loadedmetadata イベントが2回呼ばれてしまうんですよね……なんでだろう。僕の環境だけでしょうか。ごく普通のChromeのはずなんですが。

正しいかどうかはわかんないけどこうしたら解決しました。

let audio = new Audio()
audio.play()
audio.pause()
audio.currentTime = 0

audio = new Audio()
audio.play()

要するに、Audioオブジェクトを初期化すればいいと。それで loadedmetadata イベントや ended イベントが1回ずつきちんと呼ばれるようになって、動作が安定しました。

お困りの方はお試しください。