🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
      在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