iOSのSafariでキャッシュされたオーディオをオフラインで再生することは、
達成が不可能な目標であると考えられていた長い挑戦でした。 しかし、
Web Audio API （WebKitエンジンのみ）の出現により、まだいくつかのステップを踏まなければならないという事実にもかかわらず、ついに可能になりました。
悪いニュースは、
アプリケーションキャッシュを使用してmp3ファイルをキャッシュできず、
XmlHttpRequestを使用してアップロードするだけではできないこと
XmlHttpRequest 。 iOS 6のSafariはmp3ファイルをキャッシュしますが、静かにそれらの再生を拒否します（非常に便利です！）
Base64が助けになります
Web Audio APIは開発者に
オーディオバッファーへの直接アクセスを提供するという事実により、データ形式をその場で変更し、再生のためにWeb Audio APIに直接転送できます。 たとえば、mp3ファイルをbase64文字列にエンコードした場合、それを
ArrayBufferにデコードし、生のオーディオデータを変換できます。
オーディオファイルのエンコード
OpenSSLを使用して、mp3ファイルをbase64文字列に簡単に変換でき
ます 。 プレインストールされているMac OS Xを実行している場合は、Terminal.appを開いて次のコマンドを入力します。
openssl base64 -in [infile] -out [outfile]
[infile]をmp3ファイルへのパスに、[outfile]をエンコードされたデータを保存するパスに置き換えます。
このコマンドは、オーディオファイルのbase64エンコード文字列表現を保存します。 次に、任意のWebストレージ（
アプリケーションキャッシュ 、
ローカルストレージ 、
webSQLなど ）を使用してこの行をキャッシュできます。
ArrayBufferのBase64
base64をArrayBufferに変換するには、ソリューションを使用する必要があります。 Daniele Guerreroの
base64-binary.jsソリューションを
ご覧ください 。 これは、この目的のために特別に作成された優れたスクリプトです。 base64文字列を
Uint8Arrayに変換し、ArrayBufferに保存します。
その後、Web Audio APIの
decodeAudioData()を使用してオーディオデータを単純にデコードできます。
var buff = Base64Binary.decodeArrayBuffer(sound); myAudioContext.decodeAudioData(buff, function(audioData) { myBuffer = audioData; });
オーディオデータをトランスコードした後、オーディオバッファに転送してサウンドを再生します。
mySource = myAudioContext.createBufferSource(); mySource.buffer = myBuffer; mySource.connect(myAudioContext.destination); mySource.noteOn(0);
デモとソースコード
この記事の手法を使用した追加の例については、
オンラインデモと
ソースコードを
ご覧ください。
ブラウザのサポート
提示されたデモは、Safari 6、Chrome Desktop、およびiOS6で動作します。 この手法は、WebオーディオAPIをサポートする任意のブラウザーで機能する可能性があるため、Chrome Mobileがすぐにサポートを追加することを願っています。
現時点では、W3CはWebオーディオAPI
を標準として宣伝しています。