Animate CC で作ったWEBアプリケーションがiPhoneで音が出なかったわけ

キッチンタイマーを作ってみました。
Chrome、Edge、Firefoxではちゃんと動作しています。
時間が来ると音声でお知らせするという機能がついたものを考えていたのですがiPhoneでは音が出ないのです。

タイマーなのでAnimate CC で SetIntervalを使って時間を計測していました。
その中で、時間が来たかどうかを比較し、時間が来たら音声を流したいのですが、うまくいきません。
何となくですが、setIntervalの中のループでは音を出すことができないように思えます。

原因はどこにあるのか見つけられていませんが、もう少し頑張ってみることにします。
なかなか手強いです。

iPhoneでも音を鳴らすことは絶対必要なので、色々調べていました。
それはiPhone Safariの仕様にありました。
iPhoneは勝手に音を出せないそうです。ユーザーがアクションすることによって音が再生される仕組み。
その仕様がわかったので、タイマーをスタートさせると同時に音を一つ鳴らせば、終了時のアナウンスも再生されました。

こんな仕様があったのですね。

Animate CC でmp3を再生

Animate CC で作っているHTML対応のアプリケーションで音声を再生する必要がありました。
ブラウザによってはmp3を再生しないこともあるようですが、テストに使っていたWindows Edgeはmp3の再生に対応しているようなので、mp3で素材を作りました。

Animate CC のライブラリにmp3の素材を読み込んで以下のスクリプトを入力

var audio = new Audio("test.mp3");

audio.play();

しかし音は再生されません。

サンプルになりそうなコードに書き換えても無理でした。

非常に悩みましたが、素材をライブラリに読み込むのではなく、書き出されたHTMLファイルと同じところに素材を配置すると再生されました。

Animate CC でSWFへの書き出しなどに使っている場合はライブラリに読み込んで問題ないのでしょうが今回の私のAnimate CC はWEBアプリケーションとして作っているので、そのあたりの使い方が違うのでしょう。

ネットで調べてもFlashとしてのAnimate CC とHTML Canvas書き出し対応のAnimate CC としての存在が混在していて結構混乱してしまいます。

ま、なんとかなったので良しとします。

役に立つ、consoleにメッセージを表示する方法

console.log("Hello");

する方法で、コンソールと言われている場所にテキストを表示することができます。
WindowsのEdgeやChromeではF12を押すとブラウザの画面に何やら現れ、色々なタブの中にコンソールと書かれているタブがいます。

このコンソールタブに色々なメッセージを表示することができます。