在iOS Safari中播放离线音频

        在iOSSafari浏览器上播放缓存的音频供离线使用一直是一个挑战,已经被证明是不可能完成的任务 。但随着网络音频API的发展(仅支持WebKit内核),现在终于实现了不过还需要经过一些步骤。

        坏消息是我们还无法使用应用缓存缓存MP3文件,然后简单地使用XmlHttpRequest进行加载。iOS6上的Safari浏览器可以缓存MP3,但是会拒绝播放它。

        但是这不代表着无药可救

        使用Base64编码

        因为网络音频API为开发者提供了AudioBuffer,你现在可以马上使用它来转换数据格式,并且把它们直接采用网络音频API来进行播放。例如,如果你把一个MP3文件编码成Base64,你可以把它解码为ArrayBuffer,变成原始的音频数据。

        编码音频文件

        你可以很容易地使用OpenSSL将MP3文件转换为Base64字符串。MacOS X系统已经预装了OpenSSL,所以只需打开终端程序,然后键入以下命令:

 

[html] view plaincopy

 

  1. openssl base64 -in [infile] -out [outfile]  

 

        请确保把[infile]更换为你MP3的路径,而将[outfile]替换为你所选择的编码数据的目标路径。

        这将把声音文件输出为Base64编码的字符串。然后,你可以选择使用任何形式的网络存储(例如应用缓存本地存储,或者webSQL)来缓存字符串。

        Base64到ArrayBuffer

        为了把Base64字符串解码为ArrayBuffer,你需要使用一个自定义的方法。丹尼尔·格雷罗的base64binary.js是一个好的脚本,可以准确的实现这个目的。它把Base64字符串转换成一个Uint8Array类型的数组,并将其存储在一个ArrayBuffer中。

        一旦做到这一点,你可以简单地采用网络音频API的decodeAudioData()方法来解码音频数据:

 

[html] view plaincopy

 

  1. var buff = Base64Binary.decodeArrayBuffer(sound);  
  2. myAudioContext.decodeAudioData(buff, function(audioData) {  
  3.     myBuffer = audioData;   
  4. });  

 

        一旦你的音频数据解码完成,将它传递给音频缓冲源并播放声音:

 

[html] view plaincopy

 

  1. mySource = myAudioContext.createBufferSource();  
  2. mySource.buffer = myBuffer;  
  3. mySource.connect(myAudioContext.destination);  
  4. mySource.noteOn(0);  

 

 

        演示和源代码

        此处是在线演示源代码

        浏览器支持

        目前此演示支持Safari 6,Chrome桌面版和iOS6 Safari浏览器。该技术未来可以工作在任何支持网络音频API的浏览器上,所以我希望Chrome移动浏览器能尽快的添加支持。

        W3C目前正在完善网络音频API标准

         译自:http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/

转自:http://blog.csdn.net/hfahe/article/details/8441342

相关阅读:克服 iOS HTML5 音频的局限

 

发布者

小懿

RingCentral敏捷教练 不懂技术的产品经理不是好教练!

发表评论

邮箱地址不会被公开。 必填项已用*标注