環境

名称	バージョン
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だとメモリリークが発生するっぽい。