iOS 6のSafariでオフラインのWebオーディオ

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 を標準として宣伝しています。