JavaScript: 音声ファイル（Audio）を再生する

JavaScriptで音声ファイルを再生する場合は、 Audioオブジェクトのplayメソッドを使用します。

連続再生したい場合は loopプロパティをtrueに設定し、 再生を停止したい場合は puaseメソッドを使用します。

次のサンプルコードでは、 HTMLで3つのボタン「再生」「連続再生」「ストップ」を作成し、 ボタンが押された場合のそれぞれの処理をJavaScriptで記述しています。

HTML
<button id="go">再生</button>

<button id="loop">連続再生</button>

<button id= "stop">ストップ</button>
JavaScript
// Audioオブジェクトを作成
let ad = new Audio("./sample.mp3");

ad.volume = 0.1; // ボリューム

// 再生ボタン
let elem_go = document.getElementById("go");
elem_go.addEventListener("click", function(){
	ad.play();  // 再生
	ad.loop = false; 
}, false);

// 連続再生ボタン
let elem_loop = document.getElementById("loop");
elem_loop.addEventListener("click", function(){
	ad.play();
	ad.loop = true; // 繰り返し
}, false);

// ストップボタン
let elem_stop = document.getElementById("stop");
elem_stop.addEventListener("click", function(){
	ad.pause();          // 一時停止
	ad.currentTime = 0;  // 次は最初（先頭）から再生する
}, false);

コード解説

まずはAudioオブジェクトを作成します （引数に再生したい音声ファイルを指定）。

// Audioオブジェクトを作成
let ad = new Audio("./00-jihou.mp3");

再生する場合はAudioオブジェクトのplayメソッドを使用します。

ad.play();  // 再生

連続再生させる場合はloopプロパティをtrueに設定します。

ad.play();
ad.loop = true; // 繰り返し

一時停止する場合はpauseメソッドを使用します

ad.pause();          // 一時停止

pauseメソッドだけだと、次に再生するときに途中から（ストップした時点から）再生されます。 最初（先頭）から再生したい場合は次のように「currentTime = 0」と記述します。

ad.pause();          // 一時停止
ad.currentTime = 0;  // 次は最初（先頭）から再生する
JavaScript入門