脱FlashのためのJavaScript その2 – 読み込み後のオーディオ自動再生は制限があった

前回の記事でFlashの代わりにJavaScriptを用いて、何か動きのあるものを作りたいと思い、昔よく遊んだFlashを再現してみました。

某アニメ風タイトルメーカが作りたかった・・・しかし

前回と同じ要領でオーディオファイルを先に読み込ませて、読み込みが完了した時点で予め用意されたテキストをオーディオファイルと同時に順番に表示していく・・・というスクリプトなのですが、ますはサンプルとして以下のようなものを作ってみました。

ルパン三世風タイトルジェネレータ

https://weblabyrinth.net/production-files/lupin-the-third
音量注意

使い方

ページの下にあるgenerateをクリックするとフォームが表示されますので、フォーム内にタイトルにしたい文字列を入力してください。
その後、再生したい音量を選択し、generate!ボタンを押すと入力した文字列が効果音とともに流れて例のタイトルになります。自分で作ったタイトルのページは、アドレスをコピーしてメールなどで送ることで他の人に見せることも可能です。

とりあえず完成したのだが・・・

結果としては、自分の望む動作をするスクリプトが完成したのですが、一つ問題が発生しました。

モバイル端末で操作させた時にオーディオファイルが自動で再生されない

はい。うんともすんとも言いませんでした。PCで見た場合は正常に動作していたのですが、androidやiOSでこのページを見た場合はオーディオファイルの自動再生がまったく行われませんでした。（音声以外の動作はPCで見た時と同じ動作をしていました）
何が悪いのか、何度もスクリプトと睨めっこしながら色々やり方を変えてみたのですが、一向に改善しなかったのでgoogleで情報収集をしたところ、以下のようなページに巡り合えました。

iOS, Android での HTML5 Audio 再生について
http://yutawatanabe.hatenablog.com/entry/ios-safari-android-chrome-html5-audio

モバイル端末では、閲覧者が何も知らないでページを開いた先で、パケットを大量に使用するビデオやオーディオファイルを告知無しに自動でダウンロード開始させるのはダメですよ、ということでしょうかね。

確かに、何気なく開いたページ先で１ギガを超える様なムービー等が再生され始めたら、その月のナンG制限なんてあっという間に消費されてしまいますものね・・・。
そう考えたら納得です。

モバイル端末のブラウザ上でオーディオファイルを再生させるためには、閲覧者が画面をタップ（再生ボタンをクリック）する必要がある

とはいえ、モバイル端末のブラウザ上で、オーディオファイルはまったく再生させることができないと言うわけではなく、対象となるボタンを閲覧者にクリックしてもらえればオーディオファイルは再生してくれると言うことです。
前回の記事で作成したスクリプトがモバイル端末で動作したのは、ボタンをタップして再生していたからなんですね。

音が出るwebコンテンツのモバイル端末を考慮したアプローチは

PCで見た場合は、オーディオファイルを自動再生させるJavaScriptを含んだwebページをは問題なく動作することから、ある程度自由度のあるコンテンツを作ることはできるのですが、問題となるのはモバイル端末の方でどう見せるのか、になりますね。

その1　もう動きと音声をまとめてしまう

意図した見せ方（アニメーション）とそれに合わせたタイミングで再生される音声を一つのmp4形式などの動画ファイルにしてしまい、ページ内に貼り付けてしまう。そうすることで再生後の音声は意図したタイミングで再生しててくれます。

しかしモバイル端末上の動画ファイルも、実はオーディオファイルと同様の振る舞いで、閲覧者側のボタンクリック以外の再生を受け付けてくれません。
そのため、ページを開いたら「Welcome」的なボタンを用意して、ボタンを押されたのをきっかけに動画を埋め込んだページ内容を表示させる、などの工夫が必要になります。

その2　音声ファイルをクリックしてもらいたいタイミングのたびにクリックしてもらう

webページで音を出したいのであれば、閲覧者にクリックしてもらうのが前提となるので、とにかくクリックをしてもらうシチュエーションを作るしかないでしょう。
コンテンツ切り替えのタイミングや、何らかのタイミングで閲覧者がクリックしたくなるような工夫を考える必要があります。

その3　webページで音を出すことを諦める！

記事的に見も蓋も無いですね。はい。
しかしながらFlash全盛期を経て、面白いコンテンツがweb上にあふれていた反面、ページを開いて突然音声が流れるページは敬遠されてきたのも事実かと思います。（これはMIDIが流行っていた時期にも言われていましたね）

モバイル端末としてのwebページは、あくまで文字と画像で情報を得るものであって、マルチなメディア情報を扱う媒体ではない。と割り切ったほうが幸せになれるかもしれません。自分もスマートフォンでYoutubeを見る場合は専用のアプリを使いますしね。

つまりは
ってことなんでしょうかね・・・？

とはいえ、タイトルジェネレーターもせっかく作ったことだし、モバイル端末でもうまく見せられる工夫を考えてみたいところです。
またモバイルのwebページでも、まったく音を出せない訳ではないので、適材適所でオーディオファイル（ビデオファイル）を使っていきたいものですね。