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をインストールした際は再生可能
などなどの条件が確認できます。
つまり、WebサイトでBGMを再生したい場合は、一度ユーザーにクリックやタップなどのジェスチャーをしてもらわないといけないわけです。
ユーザーのジェスチャーきっかけではなく、勝手にメディアを再生されてしまうと、ユーザーがびっくりしてしまうので、ユーザー目線ではとても良い制限なのですが、開発者視点だとこれがなかなか面倒になるケースがありました。
しかし、howler.jsを使うと、この制約が割と簡単に解決できます。
DEMO
上記は、
const sound = new Howl({ src: ['sound.mp3'] }); setInterval(() => { sound.play(); }, 2000);
という感じで、2秒ごとにsound.mp3を再生するスクリプトを読み込んだサイトです。
アクセスしてもユーザーのジェスチャーがない状態ではmp3は再生されませんが、ページをクリックしたりタップしたりするとmp3が再生され始めます。
つまり、howler.jsでオーディオを再生すると「例え再生できなかったとしても、ユーザーのジェスチャーを待って、なるべく早く再生される」という挙動になるわけです。
どのように実現しているかというと、body要素に、
- clickイベント
- keydownイベント
- touchendイベント
- touchstartイベント
に対し、再生待ちになっているオーディオがあった際は再生するという処理を持つ関数を張っているようです。
これを自前で実装しようとすると結構面倒なので、今後はhowler.jsを積極的に使っていこうと思いました。