発端：ついでにWebアプリ
昨年の夏にスマホアプリで「脱出ゲーム」をリリースしたのですが、ふと思ったのです。処理速度を必要としない「脱出ゲーム」をなぜC++（cocos2d-x）で組んでいるのだろう？ webView上でhtmlコンテンツが再生できるのだから、htmlで制作した方が工数を大幅に削減できるのではないか？と。
弾幕ゲームは処理速度が必要なので今後もC++(cocos2d-x)を利用していきます。
主人公は見覚えのある部屋の中にいた。しかし記憶が曖昧で自分が誰なのか？ここで何をしているのかすら分からない…。
実際にC++(cocos2d-x)を覚える前はjQueryを利用したhtmlコンテンツをwebView上で再生するだけのアプリをリリースしていましたし。jQuery問題集も部分的にネイティブと連携していますがほとんどHTMLコンテンツです。
七並べを頑張ると良い占いの結果が出る占いアプリを作成しました。Android版は配信停止
そんな所へGoogleが進めようとしているProgressive Web Apps（プログレッシブウェブアプリ）の情報が流れてきました。であるなら、ついでにWebアプリとしても成立するような構造で作ってみようと決めたわけです（まずはプログレッシブではないものを）。具体的にはネイティブとの連携を一切せず、hmtlだけで完結させます。
以前リリースしたスマホアプリ「7並べ占い」の時点でhtml上でのサウンド再生の問題は確認していたので、ネイティブ側でサウンドを再生することで難を逃れていました。しかし今回はwebアプリにするため逃げずに対応しようと思ったら前回の記事のようなザマです…。
スマホアプリをストアに掲載するには審査が必要ですが、ブラウザアプリには審査がありません。そのためアプリよりも制限が厳しくなっています。
何が問題を確認する
前回の記事の後、いろいろ忙しくなってしまって2ヶ月も放置してしまいました。なので簡単なサンプルを用意して問題を再確認することにしました。
簡単にまとめると、audioタグだとループ再生の際に「間」が開いてしまうブラウザがある。またスマホのブラウザでは自動再生はできません。audioAPIはIEでは利用できないが、ループ再生が綺麗に繋がり、自動再生できないブラウザはiOSのsafariだけでした。利用したhtmlファイルは以下。
今回利用したサンプルの目次です。皆さんの環境でも試してみてください。
ではサンプル毎に説明していきます。
Audioタグ：ループ再生
ループの設定は属性としてloopを指定するだけです。preload属性で設定している値「auto」は音を利用しない場合でも読み込む設定するです。
→参考：MdNのaudioタグ説明ページ
<audio preload="auto" src="sound/bgm.mp3" loop controls></audio>
ループが繋がらなかったのは下表の赤いブラウザでした。macはfirefox以外はすべてループするときに間が開いてしまいます（macのsafariは特に間が長い気がします）。
| Mac | Safari | Chrome | Opera | FireFox |
|---|---|---|---|---|
| Win | IE11 | Edge | ||
| iOS | Safari | |||
| Android | Chrome |
Audioタグ：自動再生
前述の動画の通りiOSのsafariは自動再生できません。またAndroidのchromeもダメでした。あとスマホではないMacのsafariもダメでした。EdgeもIE11は問題なく自動再生できました。
| Mac | Safari | Chrome | Opera | FireFox |
|---|---|---|---|---|
| Win | IE11 | Edge | ||
| iOS | Safari | |||
| Android | Chrome |
AudioAPI：ループ再生
AudioAPIでのループは対応していないIE以外ははすべてOK。macのsafariも大丈夫なきがします（微妙に間が開いている？）。
| Mac | Safari | Chrome | Opera | FireFox |
|---|---|---|---|---|
| Win | IE11 | Edge | ||
| iOS | Safari | |||
| Android | Chrome |
AudioAPI：自動再生
audioAPIでの自動再生は、対応していないIE以外ではiOSのsafariがダメでした（macのsafariはOK）。
| Mac | Safari | Chrome | Opera | FireFox |
|---|---|---|---|---|
| Win | IE11 | Edge | ||
| iOS | Safari | |||
| Android | Chrome |
audioタグとaudioAPIのどちらを利用するか？
audioAPIはIE11に対応していませんから音が重要な役割を果たさないコンテンツ（ツール系のアプリetc.）はAudioタグを使うべきでしょう。windows8.xにはEdgeをインストールできないので、windows8.1がサポート対象外になる2023年まではIE11に対応すべきだと思うのです。
しかし音が重要な役割を果たすゲームなどのコンテンツではaudioAPIを使った方が良いと思います。最近リリースされた「アイドルマスター シャイニーカラーズ」はaudioAPIを利用しています（enza-platform.js）。
IE11で開くと音は出ませんが、音ゲーではないので遊ぶことはできると思います（タイミングゲー）。
ブラウザアプリは通常のアプリと異なりAppleやGoogleに上前を刎ねられないので企業的には超魅力。
今作成しているサンプルはaudioタグでもループ音が繋がるように調整しました（macのsafariはさらに調整しないとダメっぽい…）。次回はその方法について書きたいと思います（凄く面倒だったので、それも踏まえゲームではaudioAPIが良いと思うのです）。
ブラウザで遊べるゲーム。もちろんスマホでもOK。
今回はここまで、
4年前のソースを2ヶ月前に修正して、最近また試行錯誤しながら修正している。なので？ ソースがめちゃくちゃ…。さらにモチベーションが下がる…。でもなるべく早く次の記事を書こうと思います。
twitterを本格的に初めてみた。ブログの更新記事をつぶやくのがメイン。あとCocos2dやUnity、その他アプリ開発に関連するツイッターの方をフォローして情報も集められたらなぁと思います。
— 柳澤@ゲーム作るよ (@designdrill) 2015, 12月 28
