-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Open
Labels
@mogamoga1024
Description
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(); }
この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