2022年12月06日の日記です


iPhone の Javascript で Howler.js を使う  2022-12-06 11:14:34  コンピュータ

仕事で作っていたプログラムで、スマホページから、Javascript で、音を出したくなった。


その仕事の中で、PC から音を出すのには Howler.js というライブラリを使用していたので、そのまま使ってみる。


…Android では動くのだが、iPhone で動かない。


まぁ、こういうことはよくある。ネットで情報収集。

最初にユーザー操作で音を出さないと音が出ないよ、と書いたページ多数。


ずっと昔は、Javascript から自由にメディア再生できた。

そうしたら、開いた瞬間に問答無用で音楽を流したり、広告動画を流したりするページが多数あり、多くの人が迷惑していた。


そんなわけで、今の Javascript では、「ユーザーの操作により起動されたプログラム」の中でメディア再生を行う必要がある。

一度再生させれば、ユーザーの許可を得たことになり、後は好きなタイミングで再生できる。


これを解説したページは、その移行期に書かれたのだろうが、今回の問題はそれではない。




2020 年頃の記事で、iPhone のアップデート時にバグがあって Audio 再生がうまく行かないよ、というのがあった。

これはのちにバグ修正されたらしい。


2022 年2月ごろの記事で、iPhone のアップデート時にバグがあって Audio再生がうまく行かないよ、というのがあった。

これはのちにバグ修正されたらしい。



…別々のバグだが、iPhone では時々こういうことが起きるようだ。


2022年8月ごろの Howler.js コミュニティ掲示板の書き込みで、iPhone でうまく音が鳴らない、というのがあった。

html5audio を有効にすると鳴る、という対処法が書かれていたが、これは目的のものとは違う。


html5audio は、本当に自由に音を鳴らせる仕組みだ。

その一方で、非常に処理が重い。単に音を再生したいだけなら、この仕組みを使うのは違う。


しかし、Howler.js は音を鳴らすライブラリなので、この仕組みに対応していて、有効にすればそちらが使われる。


試してみたら確かに音は出たが、それ以外の処理に支障が出るほど重い処理になった。




そんなこんなで苦労したが、ここらへんで答えを書こう。


近年の iOS Sagari のアップデートで、メディア再生の「許可」の方法が変わったらしい。


以前は、先に書いた通り、ユーザーの操作の際にメディア再生を行えば、それ以降の再生も許可された。


Howler.js ではこの仕組みに自動で対応していて、ライブラリを読み込んだだけで、「画面のどこかをクリックしただけで動くプログラム」を仕込んでくれる。


このプログラムの中でメディア再生を行えば、以降のメディア再生は自由になるのだ。

前提として、一度画面に触ってもらう必要はあるのだが、それはユーザーのコンテンツでうまく導いてやる必要がある



さて、この「Howler.js が自動で行うメディア再生」は、Howler.js 自体の中に「無音」の音が仕込まれていて、それで行う仕組みだった。


そして、iOS はメディア再生の許可方法を変えた。

今後は、「ユーザーが許可したメディアファイル」のみが、自由に再生可能になる。


ここで、Howler.js ライブラリを使って出したい「音」のファイルと、Howler.js が自動で行う「無音」のファイルは、当然ながら違うものなのだ。

結果として、ライブラリ使用者が鳴らしたい音は、iOS ではどう頑張っても鳴ってくれない。




回避方法。

Howler.js に鳴らすファイルの URL を指示するはずだが、それとは別に、audio タグで同じ URL のファイルを読み込もう。


そして、ユーザー操作で、この audio タグのファイルを play し、即座に pause する。

さらに、Howler.js を使い何らかの音を出す。


なんかややこしいけど、これで以降は自由に音を出すことができる。


audio タグと Howler.js の2重に「音を出す仕組み」を用意する形だが、使うのは同じファイルなので、両方に許可が出るようだ。



しかし、両方で音を出す指示をしないと、正しく音が出てくれない。片側でも良さそうなものなのに。

これはなぜかわからない。


Howler.js には「サウンドスプライト」という機能があり、複数の短い音を1つのファイルにして、その「任意の部分」だけを再生することで、短い音を再生できる。


本来は、多数のサウンドファイルを1つにまとめてロードのオーバーヘッドを減らすのが目的なのだが、全部で「一つのファイル」なので、このファイルに対して許可を得れば全部の音を鳴らすことができる。


audio タグ側を play して pause したのは、全部の音を出すのを避けるためだ。

また、audio タグを準備するのに Howler.js も使用するのは、サウンドスプライト機能が便利だからだ。



なんだか無駄が多くて不格好な解決方法なのだけど、とりあえずはこれで iPhone でも Howler.js が使える。



同じテーマの日記(最近の一覧)

コンピュータ

別年同日の日記

07年 妻の誕生日

10年 誕生日に必要なもの

12年 Nexus 7 買った


申し訳ありませんが、現在意見投稿をできない状態にしています


戻る
トップページへ

-- share --

0000

-- follow --




- Reverse Link -