Audio not playing after returning from background on iOS Chrome and a possible solution #1753

mogamoga1024 · 2025-02-23T22:20:52Z

The Problem

iOSのChromeにて、バックグラウンドから復帰時に音が鳴りません。

Safariでも同じ現象が起こりそうですが未確認です。

Reproducible Example

No response

Reproduction Steps

以下のHTMLをiOSのChromeで読み込む
再生ボタンを押す
タブを変えるか、スマホをスリープさせるか、Chromeをバックグラウンドにする
再度、このページをフォアグラウンドにする
そしてもう一回再生ボタンを押す
音が鳴らない（絶望）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>実験</title>
  <script src="https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js"></script>
</head>
<body>
  <button id="sound">再生</button>
  <div id="message"></div>
  <script src="main.js"></script>
</body>
</html>

let sound = null;
const $sound = document.querySelector("#sound");
const $message = document.querySelector("#message");

// 再生ボタンがクリックされたときはBGMを再生する
$sound.addEventListener("click", async () => {
    sound?.stop();
    if (sound === null) {
        sound = await createSound({
            src: "bgm.mp3",
            volume: 1,
            html5: false,
        });
    }

    $message.innerText = Howler.ctx.state;
    
    sound.play();
});

// ページが非表示になったときはBGMを停止する
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        sound?.stop();
    }
});

// Howlオブジェクトの生成
function createSound(option) {
    const sound = new Howl(option);
    return new Promise((resolve, reject) => {
        sound.once("load", () => {
            resolve(sound);
        });
        sound.once("loaderror", () => {
            reject();
        });
    })
}

Possible Solution

以下のようにコードを書いたら直りました。

sound.play();

↑これを
↓こうする

if (Howler.ctx.state === "suspended" || Howler.ctx.state === "interrupted") {
    Howler.ctx.resume().then(() => {
        sound.play();
    });
}
else {
    sound.play();
}

参考：https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/state#resuming_interrupted_play_states_in_ios_safari

このissueはこの事実を周知させるためにあげました。
何かのヒントになれば嬉しいです。

全体は以下の通りです。

let sound = null;
const $sound = document.querySelector("#sound");
const $message = document.querySelector("#message");

// 再生ボタンがクリックされたときはBGMを再生する
$sound.addEventListener("click", async () => {
    sound?.stop();
    if (sound === null) {
        sound = await createSound({
            src: "bgm.mp3",
            volume: 1,
            html5: false,
        });
    }

    $message.innerText = Howler.ctx.state;
    
    if (Howler.ctx.state === "suspended" || Howler.ctx.state === "interrupted") {
        Howler.ctx.resume().then(() => {
            sound.play();
        });
    }
    else {
        sound.play();
    }
});

// ページが非表示になったときはBGMを停止する
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        sound?.stop();
    }
});

// Howlオブジェクトの生成
function createSound(option) {
    const sound = new Howl(option);
    return new Promise((resolve, reject) => {
        sound.once("load", () => {
            resolve(sound);
        });
        sound.once("loaderror", () => {
            reject();
        });
    })
}

Context

No response

Howler.js Version

2.2.4

Affected Browser(s)/Versiuon(s)

No response

benjaminbarbe · 2025-03-28T13:01:57Z

+1

mogamoga1024 added the bug label Feb 23, 2025

mogamoga1024 changed the title ~~iOSのChromeにて、バックグラウンドから復帰時に音が鳴らない現象＆解決方法？~~ Audio not playing after returning from background on iOS Chrome and a possible solution Feb 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Audio not playing after returning from background on iOS Chrome and a possible solution #1753

Audio not playing after returning from background on iOS Chrome and a possible solution #1753

mogamoga1024 commented Feb 23, 2025 •

edited

Loading

benjaminbarbe commented Mar 28, 2025

Audio not playing after returning from background on iOS Chrome and a possible solution #1753

Audio not playing after returning from background on iOS Chrome and a possible solution #1753

Comments

mogamoga1024 commented Feb 23, 2025 • edited Loading

The Problem

Reproducible Example

Reproduction Steps

Possible Solution

Context

Howler.js Version

Affected Browser(s)/Versiuon(s)

benjaminbarbe commented Mar 28, 2025

mogamoga1024 commented Feb 23, 2025 •

edited

Loading