web-dev-qa-db-ja.com

Scirraはどのようにしてコンストラクト2でHTML5オーディオを完璧にしたのですか?

チェックアウト このスペースシューターのデモ

HTML5オーディオはChrome 18およびFirefox10でperfectです。サウンドの再生に遅れはなく、各サンプルが再生されます前回、HTML5オーディオとJavaScriptを使用してサウンドを再生しようとしたとき、サウンドを2回以上再生することができませんでした。

これを完璧にするために、Scirraはどのような魔術を行っていますか?

29
a paid nerd

私はConstruct2の開発者なので、あなたの質問に答えるのに十分な資格があることを願っています:)

HTML5オーディオは確かに混乱しているので、Construct 2で防弾にするためにかなりの時間を費やしました。これは、私が行ったことの概要です。

Web Audio APIを使用します

HTML5オーディオは音楽のストリーミング用に設計されているように見えるため、HTML5オーディオオブジェクトは一種の重量級のオブジェクトです。 Space Blasterのように、1秒間に10音を再生すると、ブラウザを簡単に操作できます。一方、Web Audio APIは、ルーティング、エフェクト、軽量のサウンド再生を備えた高性能オーディオエンジンです。ゲームに最適です。オーディオバッファとオーディオ再生は分離されているため、1つのデータバッファを使用して同時に何度も効率的に再生できますが、HTML5サウンドを数回再生すると、毎回再ダウンロードされるため、ブラウザによってはバグが多くなります。実際にはゲームなどのために設計されているので、何トンもの音を何年にもわたって楽しく再生することができ、それでもうまく聞こえます。 HTML5オーディオを音源として使用することもできますが、私はユーザーが音楽トラックとして指定したものにのみHTML5オーディオを使用します(ストリーミングが必要な場所であるため、通常、Web AudioAPIの他のすべては以前に完全にダウンロードされています再生)。

Web Audio APIはChromeでサポートされており、iOS 6以降にも組み込まれています(ただし、タッチイベントでオーディオを再生しようとするまでミュートされます)、Firefoxはサポートに取り組んでおり、まもなくChrome Android用。したがって、これらのプラットフォームでは、オーディオの信頼性が大幅に向上します。

HTML5Rocks および 提案された仕様 に関する詳細情報-今のところ、ドキュメントとして仕様を使用する必要があります。他に多くはありません。

その他のブラウザ:オーディオリサイクルシステムを実装する

Web Audio APIはまだどこでもサポートされていません。特にIEは、下位互換性のためにゲームで機能する可能性のあるものにHTML5オーディオをクローバーする必要があることを意味します。これを行う方法は、オーディオオブジェクトをリサイクルすることです。

Space Blasterのプレーヤーのレーザーは1秒間に10回発射されますが、これには他の効果音は含まれていません。先に述べたように、オーディオは一種の重いオブジェクトであるため、1秒間にnew Audio()を10回以上実行すると、ブラウザが最終的に停止し、オーディオがグリッチし始めます。ただし、それらをリサイクルすることにより、作成されるオーディオオブジェクトの数を大幅に減らすことができます。

基本的に、効果音ごとに、そのサウンドをソースとして作成したすべてのオーディオオブジェクトのキャッシュを保持します。次に、新しいサウンドを再生するときに、再生が終了したサウンドエフェクトをキャッシュで検索します(endedプロパティはtrueになります)。見つかった場合は、最初に巻き戻して(_currentTime = 0_)、もう一度play()にします。それ以外の場合は、キャッシュにnew Audio()オブジェクトを作成します。

プレーヤーのレーザー効果音は短いので、1分間に600個のオーディオオブジェクトを作成する代わりに、3つか4つだけ循環し続けます。残念ながら、一部のブラウザはまだ4回ダウンロードするか(Safariが最後にチェックしました!)、各サウンドバッファが再生されるときに最初の待ち時間が長くなりますが、最終的にブラウザは追いつきます同じバッファが常に再利用されています。ですから、基本的に音は少し変かもしれませんが、その後はクリアになります。また、HTML5アプリのキャッシュを使用しているため、次回ディスクからすべてのロードを再生すると、後続の再生はすぐに正常に実行されます。

基本的にはそれだけです。 HTML5オーディオを最初に再生するときはまだ少し危険ですが、その後はブラウザに適切なオーディオ実装があれば、毎回かなり安定しているはずです。オーディオオブジェクトのクローンを作成する方法はいくつかありますが、既存のオーディオを巻き戻すのが最適であることがわかりました。

純粋なHTML5であることに重点を置いているため、SoundManagerやFlash /プラグインベースのフォールバックはまったくありません。

モバイルでのHTML5オーディオは試す価値がないため、PhoneGapとappMobi formobileが提供するオーディオAPIもサポートしています。これにより、オーディオエンジンがラップする合計4つのオーディオAPIが作成されます。もちろん、フランケンシュタインの混乱のように見えますが、機能します。

それでおしまい。競合他社はこれを読むと思いますが、SOの担当者がいるときに誰が気にしますか??? !!! 1111

85
AshleysBrain