? ? ? 在iOS的Safari瀏覽器上播放緩存的音頻供離線使用一直是一個挑戰，已經被證明是[不可能完成的任務](http://happyworm.com/blog/2012/05/29/playing-web-audio-offline-on-mobile-safari-mission-impossible/)?。但隨著[網絡音頻](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)API的發展（僅支持WebKit內核），現在終于實現了-不過還需要經過一些步驟。 ? ? ??壞消息是我們還無法使用[應用緩存](http://html5doctor.com/go-offline-with-application-cache/)緩存MP3文件，然后簡單地使用XmlHttpRequest進行加載。iOS6上的Safari瀏覽器可以緩存MP3，但是會拒絕播放它。 ? ? ??**但是這不代表著無藥可救** ? ? ??**使用Base64編碼** ? ? ??因為網絡音頻API為開發者提供了[AudioBuffer](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioBufferSourceNode)，你現在可以馬上使用它來轉換數據格式，并且把它們直接采用網絡音頻API來進行播放。例如，如果你把一個MP3文件編碼成Base64，你可以把它解碼為[ArrayBuffer](https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer)，變成原始的音頻數據。 ? ? ??**編碼音頻文件** ? ? ??你可以很容易地使用[OpenSSL](http://www.openssl.org/)將MP3文件轉換為Base64字符串。MacOS X系統已經預裝了OpenSSL，所以只需打開終端程序，然后鍵入以下命令： ~~~ openssl base64 -in [infile] -out [outfile] ~~~ ? ? ??請確保把[infile]更換為你MP3的路徑，而將[outfile]替換為你所選擇的編碼數據的目標路徑。 ? ? ??這將把聲音文件輸出為Base64編碼的字符串。然后，你可以選擇使用任何形式的網絡存儲（例如[應用緩存](http://html5doctor.com/go-offline-with-application-cache/)，[本地存儲](http://html5doctor.com/storing-data-the-simple-html5-way-and-a-few-tricks-you-might-not-have-known/)，或者[webSQL](http://html5doctor.com/introducing-web-sql-databases/)）來緩存字符串。 ? ? ??**Base64到ArrayBuffer** ? ? ??為了把Base64字符串解碼為ArrayBuffer，你需要使用一個自定義的方法。丹尼爾·格雷羅的[base64-binary.js](https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js)是一個好的腳本，可以準確的實現這個目的。它把Base64字符串轉換成一個[Uint8Array](https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint8Array)類型的數組，并將其存儲在一個ArrayBuffer中。 ? ? ??一旦做到這一點，你可以簡單地采用網絡音頻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); ~~~ ? ? ??**演示和源代碼** ? ? ??此處是[在線演示](http://alxgbsn.co.uk/offlinewebaudio/)和[源代碼](https://github.com/alexgibson/offlinewebaudio)。 ? ? ??**瀏覽器支持** ? ? ??目前此演示支持Safari 6，Chrome桌面版和iOS6 Safari瀏覽器。該技術未來可以工作在任何支持網絡音頻API的瀏覽器上，所以我希望Chrome移動瀏覽器能盡快的添加支持。 ? ? ??W3C目前正在完善網絡音頻API[標準](http://www.w3.org/2011/audio/wiki/W3C_Audio_Publications_and_Milestones)。 ??????? 譯自：[http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/](http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/) ??????? 轉載請注明出處：蔣宇捷的博客-http://blog.csdn.net/hfahe