howler.jsを使ってBGMを自動再生するWebサイトをつくった時の挙動を確認する 🔈

JavaScriptでのオーディオを簡単かつ確実にしてくれるライブラリ、 howler.js 。

これまでは、Audioタグや Web Audio API を直接使えば良いという方針で、あまり積極的に使ってきませんでした。

developer.mozilla.org
developer.mozilla.org

しかし、ほとんどのブラウザではユーザーのジェスチャーをきっかけにしないと音を出すことができません。

例えば、Chromeで、ウェブサイトが開いた瞬間にオーディオを再生しようとすると、

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
https://goo.gl/7K7WLu

と、エラーが出ます。

指定された URL にアクセスすると、

ミュートされているメディアは自動再生可能
ユーザーがドメインと対話（クリック、タップなど）した際は再生可能
ユーザーがホーム画面にサイトを追加したかPWAをインストールした際は再生可能

などなどの条件が確認できます。

developer.chrome.com

つまり、WebサイトでBGMを再生したい場合は、一度ユーザーにクリックやタップなどのジェスチャーをしてもらわないといけないわけです。
ユーザーのジェスチャーきっかけではなく、勝手にメディアを再生されてしまうと、ユーザーがびっくりしてしまうので、ユーザー目線ではとても良い制限なのですが、開発者視点だとこれがなかなか面倒になるケースがありました。

しかし、howler.jsを使うと、この制約が割と簡単に解決できます。

DEMO

develop.kimizuka.org

上記は、

const sound = new Howl({
  src: ['sound.mp3']
});

setInterval(() => {
  sound.play();
}, 2000);

という感じで、2秒ごとにsound.mp3を再生するスクリプトを読み込んだサイトです。
アクセスしてもユーザーのジェスチャーがない状態ではmp3は再生されませんが、ページをクリックしたりタップしたりするとmp3が再生され始めます。
つまり、howler.jsでオーディオを再生すると「例え再生できなかったとしても、ユーザーのジェスチャーを待って、なるべく早く再生される」という挙動になるわけです。