7

私はいくつかのボタンをクリックするだけで非常に短いサウンドビットを再生する小さな Web アプリを持っています。iOS (iPad) 上のモバイル Safari を明示的にターゲットにしています。

モバイル Safari でのこのコンテキストにおける HTML5 オーディオのいくつかの「欠点」についてここや他の場所で読み、いくつかの「ハック」とトリックを試した後、私は Safari が単純に見える状況に行き詰まりました (より適切な言葉がないため)。壊れた:

ボタン A をクリックすると、サウンド A を再生できます (開始までに長い時間がかかります — [再度] ダウンラディングしていると思いますか?)。その後、ボタン B をクリックすると、すぐにサウンド A が再び再生されます。ボタン C も同様です。場合によっては、別のサウンドが再生されることもあります。しかし、ほとんどが音 A です。使用されている形式は .aiff でしたが、現在は .m4a です。

自分でいくつかの小さなバージョンを作成した後、サウンドの読み込み/再生などを処理するためにBuzzライブラリを使用することにしました.

おかしなことに、彼らのデモにはゲームが含まれており、これは私が必要しているものとほとんど同じであり、同じ欠陥のある動作を引き起こします. モバイル Safari の任意のタブのオーディオ プレーヤーが、Buzz デモ ゲーム (!) から特定のサウンドを再生する状況にさえなりました。

キャッシュ マニフェストが Apple のプリロード制限を克服し、アプリがオフライン モードでボタンを押した直後にサウンドを再生するように強制するのに役立つことを期待していました。しかし、アプリ全体がキャッシュされていることを確認した後、オフライン モードでサウンドを再生/聞くことができません。

このようなものをどうにかして機能させることができた人はいますか?(— Apple が特定のことをどのように処理するかを見てきたので、あまり反応は期待できませんが…)


更新 1:

この回答の例は、同じ効果を引き起こします: iPad で HTML5/Javascript を使用してオーディオを合成する方法


更新 2:

iOS (および Safari) を更新すると、オーディオのバグが解決されるようです。ただし、キャッシュ マニフェストはオーディオ ファイルには影響しないようです。これらのファイルはまったく利用できません。

キャッシュ マニフェストを削除した後、アプリは正常に動作しますが、「ホーム画面」に追加してリロードすると、オーディオも再生されなくなります。

4

1 に答える 1

9

すべてのhtml5メディアを完全に機能させるための魔法の公式があると言えればいいのですが、そうではありません。HTML5オーディオ/ビデオのモバイルサポートは現在かなり貧弱です。デスクトップの前身よりもはるかに遅れています。さらに悪いことに、プラットフォームごとに処理方法が異なり、ほとんどのプラットフォームは最近のバージョンでしかサポートしていません。

ただし、モバイルSafariでメディアファイルを正しく機能させるために使用できるトリックがいくつかあります。それらを説明するために、あなたはその欠点のいくつかを理解する必要があるでしょう。


1)複数のオーディオ/ビデオファイルをロードすることはできません

私の経験では、ブラウザは一度に1つのファイルしかロードしません。あるファイルを再生し、別のファイルを再生してから戻ってくると、そのファイルが再び読み込まれます。そして、私はそれを自分で試したわけではありませんが、キャッシュマニフェストがここで役立つとは思いません。

私がしなければならなかったのは、すべてのオーディオファイルを1つの大きなオーディオファイルに結合することです。次に、要求されたオーディオトラックに応じて、再生位置を適切な開始位置に移動し、そのトラックを再生します。次に、setIntervalを使用して数ミリ秒ごとに再生を調べ、現在の再生位置がトラックの最後に到達したかどうかを判断します。それが終わったら、私はそれを一時停止しました。Pluis、電話のCPUに大きな負荷がかかり、フィードのチェックが少し遅すぎた場合に備えて、各トラックの間に数秒(2〜3)を与えました。

2)オーディオ/ビデオファイルを自動再生することはできません

Appleは、HTML5メディアタグテクノロジーに、これらのトラックがユーザーのクリックイベントに応答してのみロードおよび再生されるという制限を組み込みました。そうすれば、開発者は、あなたが彼らのWebサイトにアクセスしたときに、迷惑なトラックを自動再生できませんでした。

オーディオ/ビデオタグを使用していたとき、私はリッチメディア広告を作成しようとしていました。そこで、バナーをクリックして広告を展開すると、オーディオ/トラックの読み込みをバナークリックイベントにフックしました。

サウンドをオン/オフするかどうかをユーザーに尋ねる小さなライトボックスポップアップを表示することをお勧めします。ユーザーがサウンドをオンまたはオフにするかどうかに関係なく、ロード関数をそのポップアップボックスのクリックイベントにアタッチできます。

個人的には、load()関数を使用することはあまりうまくいきませんでした。その関数を実行してオーディオをロードし、[再生]をクリックすると、もう一度ロードされます。私が正しくやらなかったのはいつものことだったので、遠慮なく私が間違っていることを証明して、それを機能させてください。トラックに再生するように指示したので、ロードが開始され、setIntervalを使用して、現在の再生時間がわずか数ミリ秒増加したかどうかを確認しました。トラックの再生が始まったことに気づいたら、すぐに一時停止しました。

3)オーディオ/ビデオタグはiOS4.0以降でのみサポートされます

これを回避するためのトリックはありません。そのただの事実。


オーディオ/ビデオタグを使用して開発していたときに役立つサイトを次に示します。

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

幸運を!

于 2011-11-01T20:41:43.117 に答える