JavaScriptでの音声再生時のエラー解決方法

audioタグを利用した音声再生は、非常に簡単に実装することができるので、

このタグを利用して音声再生する機会が多いと思います。

audioタグを利用した音声再生時に、下記のようなエラーメッセージが表示される場合があります。

エラーメッセージ
エラーを回避するコード

エラーメッセージ

Uncaught (in promise): The play() request was interrupted by a call to pause().

1	Uncaught (in promise): The play() request was interrupted by a call to pause().

このエラーは、音声ファイルのソースを動的に切り替えて再生する場合に多く発生します。

例えば、処理に応じて、音声を切り替えるような実装の場合です。

このエラーの原因は、最初の再生が完了せずに、

次の音声を再生することが原因となります。

これを回避するには、下記のコードが有効となります。

エラーを回避するコード

var playObj;

audio.src = src;

playObj = audio.play();

if (playObj) {
    playObj.then(() => {
        // 音声ファイルの読込成功時
        // playback takes time
        setTimeout(() => {
            // Follow-up operation
            console.log("ここに必要な処理を記載します。");
        }, audio.duration * 1000);


    }).catch((e) => {
        // Audio loading failed
    });
}