JavaScript：オーディオの再生と停止をする

JavaScriptからmp3やm4aなどのオーディオファイルを再生・停止する方法についてサンプルコードを交えて解説します。（というかアイキャッチ画像が全てですが…）

基本的には、Audioインスタンスを生成後、再生には、play()メソッド、停止にはpause()メソッドとcurrentTimeを組み合わせて呼び出す形になります。

正式には、HTMLAudioElementインターフェイスと呼ぶらしいです。
また、Audioインスタンスには、stop()メソッドが存在しません。
pause()メソッド（一時停止）を呼び出してから、再生位置を先頭に戻すことで再生中のオーディオを停止させることになります。

サンプルコード
解説

サンプルコード

具体的に魔王魂のサイトからMP3ファイルをダウンロードして再生してみます。

乗り物03 | 魔王魂

魔王魂（森田交一）の音楽を無料ダウンロード。全曲フリーBGMとして使用可能です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <title>オーディオの再生と停止</title>
</head>
<body>
    <p>
        <button id="play">Play</button>
        <button id="pause">Pause</button>
        <button id="stop">Stop</button>
    </p>
</body>
</html>

main.js

// main.js

// 起動時の処理
window.addEventListener("load", ()=>{
    // オーディオを取得
    const audio = new Audio("mao_vehicle03.mp3");

    // ボタンDOM取得
    const play = document.getElementById("play");
    const pause = document.getElementById("pause");
    const stop = document.getElementById("stop");

    // 再生
    play.addEventListener("click", ()=>{
        audio.play();
    });

    // 一時停止
    pause.addEventListener("click", ()=>{
        audio.pause();
    });

    // 停止
    stop.addEventListener("click", ()=>{
        audio.pause();
        audio.currentTime = 0;  // 曲の先頭に再生開始位置を戻す
    });
});

サンプルでは、ダウンロードしたMP3ファイルは mao_vehicle03.mp3 と名前変更してindex.htmlと同じフォルダに保存してあります。