オーディオ要素ソースのHTML5ローカルストレージ-可能ですか？

StackOverflow https://stackoverflow.com/questions/1612116

質問

私は最近、html5の音声およびローカルストレージ機能を実験してきましたが、私は困惑しました。

音声要素のソースをローカルにキャッシュまたは保存して、より高速でオフラインでの再生を可能にしたい。問題は、現在の実装でこれがどのように可能かを見ることができないことです。

WebKitを使用して次のことを試しました：

  1. ローカルキャッシュを設定するためにマニフェストファイルを作成していますが、オーディオファイルがキャッシュ可能なアイテムではないようです。これは、おそらくストリームやその他の方法によるものです

  2. また、javascriptを使用してオーディオオブジェクトをローカルストレージに配置しようとしましたが、mp3のサイズにより、メモリの問題によりこれが不可能になります（私は思う）。

  3. データuriとbase64を使用して、htmlをキャッシュ可能なオーディオトランスポートとして使用しようとしましたが、ファイルサイズがこれを禁止しています。また、オーディオ要素はWebKitでこれを好まないようです（mozillaで正常に動作します）。

  4. ローカルデータベースストアにデータを入れる方法をいくつか試しました。再び他のケースと同じ問題に苦しんでいます。

WebKitのキャッシング/ローカルストレージを使用してオフライン再生の目標を達成する方法について、他のアイデアをお聞きしたいです。

役に立ちましたか？

解決

この質問をしてからしばらく経ちましたが、どうやって解決したかについての情報を提供したいと思いました。基本的に、これと同様の手法を使用して、データをPNGにエンコードしました。

http://audioscene.org/scene-files/yury /pngencoding/sample.html

次に、html5ローカルストレージを使用してモバイルデバイスに画像をキャッシュし、必要に応じてアクセスしました。 PNGは非常に大きかったが、これは私たちのために働いた。

他のヒント

iOS（iPhone / iPad用）で自分でこれを実行しようとしましたが、キャッシュマニフェスト内であっても、オフラインでオーディオファイルをキャッシュしません。

エラーにはなりませんが、代わりに、コントロールなしでJavaScriptを介して呼び出された場合、オーディオ要素を再生したように見せかけるだけです。コントロールが組み込まれている場合、<！> quot;オーディオファイルを再生できません。<！> quot;という代替コントロールが表示されます。アプリケーションがオンラインに接続できる場合は正常に機能します。

オーディオをキャッシュしないようです。別のサウンドリソースを再生すると、メモリから以前のリソースがクリアされるようです。これはオンラインでもかなり価値のない機能です。

音声をデータURIとしてエンコードするbase64を試しました。これはデスクトップ上のSafariで機能します（少なくとも私が使用している20〜30kのかなり短いサンプルでは）が、iOSではまったくサポートされていないようです。何もしません。 >

他のベンダーについては知りません-Google Chromeは以前は音声のデータURIをサポートしていませんでしたが、おそらくそれを修正しました...-現時点では不可能なようです。

更新：iPhone OS 3.xとのわずかな不一致（3.1.2でテスト済み）：オーディオ要素がオフラインWebアプリで指定されているが、コントロールを持たない場合、非インタラクティブコントロールが表示され、アニメーション化されていないスピナー（これは絶対にすべきではありません）。これはiOS 4.xで修正されると思われます（来週公開予定）。

作成中のゲームでこれを実行しようとしてしばらく費やしましたが、ブラウザー（FirefoxおよびChrome）がオーディオ要素のキャッシングをまだサポートしていないと判断できるので、ソリューションを投稿すると思いました見つけた。

ここで説明する回避策があります： http://dougx.net/plunder/index.php #code

それはかなりうまく機能することを確認できますが、おそらくより小さなファイルに適しています。彼がここで説明しているように（ http://dougx.net/plunder/GameSounds.txt ）、オーディオをbase64文字列としてエンコードし、data：audio / ogg; base64（または互換性のあるオーディオ形式）ヘッダーを与えて、HTML5オーディオで読み込むことができます。これは単なる文字列であるため、ブラウザはキャッシュします。

ファイルをローカルにキャッシュするための最も適切なメカニズムのように感じるため、マニフェストアプローチを機能させることが望ましいと思います。

オーディオファイルのHTTPヘッダーを変更するとどうなりますか。 Content-TypeおよびExpires？ファイル拡張子が変更された場合、ブラウザは別のことをしますか？

今まで運がなかったようです。

JAI（JavaScriptオーディオインターフェース）（<！> quot; Web <audio> <！> quot;のための世界初のJavaScriptインターフェイス）。または、書いた Alastair MacDonald に連絡してください。

これに失敗すると、 HTML5 Doctor が支援できる場合があります。

ローカルストレージへのビデオファイルとオーディオファイルの追加は、iOS 4.3で機能します。

マニフェストにビデオとオーディオファイルを追加したところ、両方ともiPadのオフラインストレージにダウンロードされました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top