前回 に引き続き、 howler.js の検証ですが、正確には、iOSでのWeb Audio API と HTMLAudioElement の比較です。
blog.kimizuka.org
developer.mozilla.org
developer.mozilla.org
かつて、iOSでの Web Audio API と Audioタグ の挙動の近いを調査したことがあります。
ざっくりしたところだと、「Web Audio API」は「iOSの消音モードのときに音は出ない（イヤホン未接続時）」が「HTMLAudioElement」は「iOSの消音モードでも音が出る」というような違いです。
howler.jsにもhtml5オプションがあり、
var sound = new Howl({ src: ['sound.mp3'], html5: true }); sound.play();
と、html5オプションにtrueを渡すと、HTMLAudioElementを使ってオーディオを再生しようとします。
html5オプションのデフォルトはfalseとなっており、falseの場合は、現状、Web Audio APIが使える環境であればWeb Audio APIを使ってオーディオを再生するようです。
今回は、iOS16.2のmobile Safariを使って、「Web Audio API」でオーディオを再生した場合と「HTML Audio Element」でオーディオを再生した場合を比較しようと思います。
消音モード（イヤホン接続なし）での挙動
Web Audio API
- ミュートで再生される
HTML Audio Element
- 本体音量に基づき再生される
所感
- サイレントモードなのに音が出るのはやめてほしい
消音モード（イヤホン接続あり）での挙動
Web Audio API
- 本体音量に基づき再生される
HTML Audio Element
- 本体音量に基づき再生される
所感
- イヤホンの有無で挙動が変わるのは気が利いていると思う
オーディオ再生中に別タブに遷移した際の挙動
Web Audio API
- 再生が続く
HTML Audio Element
- 再生が続く
所感
- デフォルトで止まって欲しい気持ちはある
オーディオ再生中に別タブに遷移し、そのタブでもオーディオを再生した際の挙動
Web Audio API
- 再生が続く
HTML Audio Element
- 再生が続く
所感
- パート毎にタブを開いて聴く音楽みたいな可能性を感じている
オーディオ再生中にスリープ / ロックした際の挙動
Web Audio API
- 停止する
所感
- スリープしたのに止まらないのはやめて欲しい
と、こんな感じでした。
個人的にはどの項目も、Web Audio APIの方が良い挙動だと思っています。
OSのサイレントモードを無視したり、スリープさせても止まらなかったり、コントロールセンターに登録されたりするのはブラウザの領域を超えている気がするからです。
なので、基本的にはhtml5オプションはfalse（デフォルト）にして、Web Audio APIで音を出すのが良いでしょう。
HTMLAudioElementは、サイレントモードでも音が出るは、スリープしても止まらないはで、主張が強すぎるのではないでしょうか。
しかし、サイレントモードに依存せずに絶対に音を出したい場合、html5オプションをtrueにせざる得ません。
が。ユーザーが音を出したくない場面で音が出る迷惑なサイトになるので、いずれにせよその点の配慮は必要な気がします。
