HTML5でオーディオに停止ボタンを追加する方法

HTML5オーディオに停止ボタンを追加する方法

HTML5のaudio要素には標準で再生・一時停止のコントロールが用意されていますが、「停止（ストップ）」ボタンはデフォルトでは提供されていません。ここでは、JavaScriptを使って停止ボタンを実装する方法を紹介します。

JavaScriptを使った実装方法

以下のコードを使用すると、オーディオの再生を停止し、再生位置を先頭に戻すことができます。

function displayStopBtn() {
    var myPlayer = document.getElementsByTagName('audio')[0];
    myPlayer.pause();
    myPlayer.currentTime = 0;
}

このコードの仕組みは以下のとおりです。

• pause()：現在再生中のオーディオを一時停止します。
• currentTime = 0：再生位置を先頭（0秒）にリセットします。

この2つを組み合わせることで、一時停止ではなく「完全に停止して最初から再生できる状態」を作れます。

jQueryを使った実装方法

jQueryを使用している場合は、以下のように記述することで、ボタンのクリックイベントに停止処理を紐づけられます。

$("#stopButton").click(function () {
    audio.pause();
    audio.currentTime = 0;
});

この例では、IDが「stopButton」の要素がクリックされたときに、オーディオの停止と再生位置のリセットが実行されます。

まとめ

HTML5のaudio要素に標準の停止ボタンはありませんが、pause()メソッドとcurrentTimeプロパティを組み合わせることで、簡単に停止機能を実装できます。JavaScript単体でもjQueryでも数行のコードで実現できるので、用途に合わせて使い分けましょう。