web-dev-qa-db-ja.com

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

私は最近html5のオーディオとローカルストレージ機能を実験していて、私が困惑している何かに遭遇しました。

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

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

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

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

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

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

WebKitのキャッシュ/ローカルストレージを使用してオフライン再生の目標を達成する方法について、他のアイデアがあれば教えてください。

28
andrewdotcom

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

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

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

7
andrewdotcom

私はiOS(iPhone/iPad用)でこれを自分でやろうとしていますが、キャッシュマニフェストであってもオフラインでオーディオファイルをキャッシュすることを拒否します。

エラーは発生しませんが、コントロールなしでJavaScriptを介して呼び出された場合、オーディオ要素を再生したふりをします。コントロールが埋め込まれている場合は、「オーディオファイルを再生できません」という代替コントロールが表示されます。アプリケーションがオンラインに接続できる場合は正常に機能します。

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

オーディオをデータURIとしてエンコードするbase64を試しました。これはデスクトップのSafariでは機能しますが(少なくとも私が使用している約20〜30kのかなり短いサンプルでは)、iOSではまったくサポートされていないようです-サイレントに何も実行しないため、非常に煩わしいです。

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

更新:iPhone OS 3.xとのマイナーな不一致(3.1.2でテスト済み):オーディオ要素がオフラインWebアプリで指定されているが、コントロールがない場合、アニメーション化されていない非対話型コントロールが表示されますその上にスピナー(それは絶対にすべきではありません)。これはiOS4.xで修正されていると思います(来週リリースされる予定です)。

6
Iain Collins

私は自分が作っているゲームでこれをやろうとしてしばらく過ごしましたが、ブラウザ(FirefoxとChrome)がまだオーディオ要素のキャッシュをサポートしていないことがわかったので、見つけた解決策を投稿すると思いました。

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

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

5
Varun Singh

今のところ運がなかったようです。

JAI(JavaScript Audio Interface) ( "世界初のWeb用javascriptインターフェース<audio> ")。または、それを書いた Alastair MacDonald に連絡してください。

それができない場合、 HTML5 Doctor が支援できる可能性があります。

2
Premasagar

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

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

2
Premasagar

ビデオおよびオーディオファイルをローカルストレージに追加することは、iOS4.3で機能します。

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

1
matejk