HTML5 Audio 在 iOS Safari 上的问题
来源:互联网 发布:淘宝怎样开网店 编辑:程序博客网 时间:2024/04/29 20:19
最近接触一个移动短项目,做摇一摇的功能,然后摇的时候要有声音,摇中奖的时候也有声音,问题来了,iOS 5 不能用代码去触发播放声音,其实 Android 4.0+ 也有一样的问题,因为目前只折腾了 iOS,所以这里就以 iOS Safari 的情况为例,其他应该是类似的,大家可以自己验证。以下的 Safari 都是指 iOS 下的。
iOS Safari 中的 HTML5 媒体元素都是单例的,所以一次只能播放一个 HTML5 音频(和 HTML5 视频)流(估计是为了减少数据费用)。音频文件只能从用户触发的触摸(单击)事件加载,如果在 HTML 标记中使用了 autoplay 属性,那么 Safari 将会忽略这个属性,并且不会在加载页面时播放此文件,对于 preload 属性,Safari 同样会忽略。唯一能解决的就是用户进入页面是,让用户触发 touch 事件:
var shakeAudio = $('#shakeAudio')[0], winAudio = $('#winAudio')[0]$(document).on('touchstart', function() { shakeAudio.load()})
触发 load 事件后,当用户再摇一摇的时候边可以用 ShakeAudio.play()
播放声音。
咦,摇中奖的声音呢?如果在上面 ontouchstart
事件中加多个 winAudio.load()
,那么 shakeAudio 播放不能,上面说了,他是一个单例,后面的会覆盖前面的。怎么办?最好的方法是使用 audio sprite,将所有的音频综合到一个单音频流中,然后播放此流的各个部分。
当然,同样需要让用户先有一次 touch 事件触发,以加载该 audioSprite 音频:
var audioSprite = $('#audioSprite')[0], audioData = { shake: { start: 0, length: 1 }, win: { start: 1.3, length: 1.5 } }
当播放 shake 的声音时:
audioSprite.currentTime = audioData.shake.start;audioSprite.play();// 添加当到达 sprite 的结尾时停止音频流的逻辑var handler = function() { if (this.currentTime >= audioData.shake.start + audioData.shake.length) { this.pause() }}audioSprite.addEventListener('timeupdate', handler, false);
播放 winAudio 同理。需要注意的是,更改 currentTime 并不是百分百正确的。假设 currentTime 设为 6.5,而实际得到的却是 6.7。每个 audio sprite 之间需要少量的空间,以避免寻找到另一个 sprite 的头部。
在访问任何 audio sprite 之前,务必确保整个音频流已加载,因为如果音频流没有完全加载,那么在想要访问已加载的流的任何一个部分时,那么这个流需要进行缓冲,而且还会在流加载过程中发生延时。
FYI: HTML5 Audio Behaviour and Support in iOS and Android
- HTML5 Audio 在 iOS Safari 上的问题
- 在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式
- audio 在ios上自动播放问题
- 解决html5 audio iphone,ipd,safari不能自动播放问题
- html5,audio标签的autoplay="autoplay"在iphone上无法播放的问题
- 通过 Chrome 调试运行在 IOS-safari 上的页面
- 通过 Chrome 调试运行在 IOS-safari 上的页面
- 通过 Chrome 调试运行在 IOS-safari 上的页面
- 通过 Chrome 调试运行在 IOS-safari 上的页面
- html5中audio标签在不同平台下的问题
- 关于有些MP3不能在safari上快进的问题
- html5 audio 语音播放在手机端使用注意(iphone,ipd,safari)
- 解决ios上audio不能自动播放的问题以及监听audio播放状态
- ios上safari的事件模型(一)
- 让 Safari 恋上 HTML5
- Safari上的table宽度问题
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
- 解决IOS通过HTML5播放Video或者Audio直接输出数据的问题
- Gradle中的task (二)高级篇 ----定义、创建、添加依赖
- Java web 程序员经历之二
- Debian上面PHP和MYSQL相关问题
- RFT相关资源
- [Phonegap+Sencha Touch] 移动开发45 Android数字证书
- HTML5 Audio 在 iOS Safari 上的问题
- 原始套接字的初始化及收发流程分析
- Aop框架介绍
- UVA - 230 Borrowers
- 【IOS开发】FMDB的简单使用
- webdirver中pagefactory和pageObjects的区别
- Zend_Config
- 杉德巍康面试经历(转载)
- js垃圾回收