31

このスペース シューターのデモをご覧ください。

HTML5 オーディオは、Chrome 18 と Firefox 10 で完璧です。サウンドの再生にラグはなく、各サンプルは完璧に再生されます。前回、HTML5 オーディオと JavaScript を使用してサウンドを再生しようとしたとき、サウンドを複数回再生することができませんでした。

これを完璧にするために、Scirra はどのような魔法を使っているのでしょうか?

4

1 に答える 1

87

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

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

Web オーディオ API を使用する

HTML5 オーディオは音楽のストリーミング用に設計されているように見えるため、HTML5 オーディオ オブジェクトは一種の重量級オブジェクトです。Space Blaster のように 1 秒間に 10 のサウンドを再生すると、ブラウザが簡単に停止してしまいます。一方、Web Audio API は、ルーティング、エフェクト、および軽量のサウンド再生を備えた高性能オーディオ エンジンです。ゲームに最適です。オーディオ バッファとオーディオ再生は分離されているため、1 つのデータ バッファを使用して効率的に同時に何度も再生できますが、ブラウザによっては、HTML5 サウンドを数回再生すると、そのたびに再ダウンロードするというバグがあります! 実際にはゲームなどのために設計されているため、何年にもわたって何トンもの音を楽しく再生でき、それでもうまくハミングします. HTML5 オーディオを音源として使用することもでき、

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

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

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

Web Audio API はまだどこでも、特に IE ではサポートされていません。つまり、後方互換性のために、ゲームで動作する可能性のあるものに HTML5 オーディオを追加する必要があります。これを行う方法は、オーディオ オブジェクトをリサイクルすることです。

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

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

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

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

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

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

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

于 2012-03-04T21:54:29.193 に答える