環境
| 名称 | バージョン |
|---|---|
| howler.js | 2.2.4 |
| iOS | 18.1.1 |
| Google Chrome | 133.0.6943.120 |
issueを見た感じ、Safariでも同じバグがありそうだが、面倒くさいので確認しない。
例で使うコード
index.html
<!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>
<script src="main.js"></script>
</body>
</html>
let sound = null;
const $sound = document.querySelector("#sound");
// 再生ボタンがクリックされたときはBGMを再生する
$sound.addEventListener("click", async () => {
sound?.stop();
if (sound === null) {
sound = await createSound({
src: "bgm.mp3",
volume: 1,
html5: true,
});
}
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();
});
})
}
バグ1. 音量が変わらない
sound = await createSound({
src: "bgm.mp3",
volume: 0.1,
html5: true,
});
と、volumeの値を変えても音量が変わらない。
解決方法
html5をfalseに変える。
sound = await createSound({
src: "bgm.mp3",
volume: 0.1,
html5: false,
});
html5がtrueのまま音量を変える方法は分からない。
というか、無理っぽい。
参考元
バグ2. 音が鳴らない
html5がfalseのとき
画面を非表示してから（タブを変える、スマホをスリープさせるなど）再表示して、再生ボタンを押しても音が鳴らない。
html5がtrueのときは、問題なく音が鳴る。
sound = await createSound({
src: "bgm.mp3",
volume: 1,
html5: false,
});
解決方法
分からない（絶望）
unload()すればいいみたいな情報があったので試したところ、
スリープさせて再度再生 → 音が鳴る
更にスリープさせて再度再生 → 音が鳴らない（絶望）
となったため、完璧な解決方法ではない模様。
unload()
let sound = null;
const $sound = document.querySelector("#sound");
// 再生ボタンがクリックされたときはBGMを再生する
$sound.addEventListener("click", async () => {
sound?.stop();
if (sound === null) {
sound = await createSound({
src: "bgm.mp3",
volume: 1,
html5: false,
});
}
sound.play();
});
// ページが非表示になったときはBGMを停止する
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
sound?.stop();
sound?.unload();
}
else {
sound = null;
Howler.unload();
}
});
// Howlオブジェクトの生成
function createSound(option) {
const sound = new Howl(option);
return new Promise((resolve, reject) => {
sound.once("load", () => {
resolve(sound);
});
sound.once("loaderror", () => {
reject();
});
})
}
追記
これで直せる？？？？？？？？
参考元
関連してそう
まとめると
こうなる。
| html5:false | html5:true | |
|---|---|---|
| 音量が | 変えられる | 変えられない（絶望） |
| 復帰時、音が | 鳴らない？ | 鳴る |
おまけ
howler.jsは素晴らしいライブラリだが、現時点でissueが352個、PRが50個あり、結構放置されている印象。
（ちなみに現バージョン2.2.4は2年前にリリースされている。）
これだけissueがあれば、投げ出したくもなる。
ちなみにhtml5:falseだとメモリリークが発生するっぽい。