在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
- 前言
- AutoPager的简单实现
- 利用CSS3特性巧妙实现漂亮的DIV箭头
- IE9在Win7下任务栏新特性简介
- 浏览器九宫格的简单实现
- Raphael js库简介
- 使用CSS3构建Ajax加载动画
- 用CSS3创建动画价格表
- 用CSS3实现浏览器的缩放功能
- 用纯CSS3实现QQ LOGO
- 用CSS3创建旋转载入器
- 使用Javascript开发移动应用程序
- 用HTML5创建超酷图像灰度渐变效果
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
- 仅用CSS创建立体旋转幻灯片
- 如何创建跨浏览器的HTML5表单
- 用CSS3实现动画进度条
- HTML5 Guitar Tab Player
- 奇妙的HTML5 Canvas动画实例
- 谈HTML5和CSS3的国际化支持
- 实现跨浏览器的HTML5占位符
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- 使用HTML5和CSS3来创建幻灯片
- HTML5之美
- 如何使用HTML5创建在线精美简历
- 以小见大、由浅入深-谈如何面试Javascript工程师
- 快速入门:HTML5强大的Details元素
- 用CSS3实现图像风格
- HTML5视频字幕与WebVTT
- 用纯CSS3实现Path华丽动画
- 用3个步骤实现响应式网页设计
- 遇见CSS3滤镜
- 关于CSS3滤镜的碎念
- 用纯CSS3绘制萌系漫画人物动态头像
- CSS3新的鼠标样式介绍
- 用HTML5献上爱的3D玫瑰
- 对HTML5 Device API相关规范的解惑
- 如何使用HTML5实现拍照上传应用
- 2012第一季度国外HTML5移动开发趋势
- HTML5新特性:范围样式
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
- Chrome 19对于HTML5最新支持的动态:电池状态API,全屏API,震动API,语音API
- 遇见Javascript类型数组(Typed Array)
- 用HTML5 Audio API开发游戏音乐
- 用HTML5实现人脸识别
- 用Javascript实现人脸美容
- Chrome 20对于HTML5最新支持的动态:颜色输入,网络信息API,CSS着色器
- 用HTML5实现手机摇一摇的功能
- 用HTML5实现iPad应用无限平滑滚动
- 用非响应式设计构建跨端Web App
- 了解SVG
- HTML5图像适配介绍
- HTML5安全:内容安全策略(CSP)简介
- HTML5安全:CORS(跨域资源共享)简介
- 用CSS3 Region和3D变换实现书籍翻页效果
- 谈谈移动App的思维误区
- Chrome新特性:文件夹拖拽支持
- 《关注HTML5安全》
- HTML5安全风险详析之一:CORS攻击
- HTML5安全风险详析之二:Web Storage攻击
- HTML5图像适配最新进展:响应式图片规范草案
- HTML5移动Web App相关标准状态及路线图
- HTML5安全风险详析之三:WebSQL攻击
- Chrome引入WebRTC支持视频聊天App
- HTML5安全风险详析之四:Web Worker攻击
- HTML5安全风险详析之五:劫持攻击
- HTML5安全风险详析之六:API攻击
- HTML5安全攻防详析之七:新标签攻击
- 在iOS Safari中播放离线音频
- 使用WebRTC实现远程屏幕共享
- Firefox、Android、iOS遇见WebRTC
- HTML5光线传感器简介
- HTML5安全攻防详析之八:Web Socket攻击
- HTML5安全攻防详析之完结篇:HTML5对安全的改进
- 激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍
- Web滚动性能优化实战
- 用CSS3设计响应式导航菜单
- 用HTML5构建高性能视差网站
- 漫谈@supports与CSS3条件规则
- HTML5下载属性简介
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(一)
- 如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(二)
- 趋势:Chrome为打包应用提供强大新特性
- 从HTML5移动应用现状谈发展趋势
- 基于HTML5的Web跨设备超声波通信方案