那些年,我们一起被坑的H5音频

标签:
audio陈在真音频html5音效 |
分类: HTML |
不要被这么文艺的标题吓到,这里不会跟你讲述中学时期泡妞史,也不会有其它什么现实不该有而小说噼里啪啦不能没有的坑爹情节,请注意,这是一篇技术类文章,主要讲的是:音频在移动端的兼容问题,至于为什么标题要起的这么文艺,这只是为了迎合下这条微博而已:

神马?你还没关注我新浪微博 - 桑尼真 ?果断走起吧,我不会晒自拍刷屏不会买面膜,有的只是吐槽跟技术类的分享,欢迎关注…
好了,前面按惯例废话了不少,下面我们来说下,音频在移动端的那些坑,坑的具体表现与填坑方式…
我私自把 音频分两种,背景音乐与音效音乐;
一、背景音乐
背景音乐,就是贯穿整个页面的音乐,一般挑选节奏与曲风页面表达主题搭配,比如旅行类的页面,我可能会挑选《Traveling Light》这样的轻快节奏的,清新乡村一点,让用户听了,感觉就真的要放下包袱去旅行的感觉;而游戏类体验类的页面,可能会挑选《The Time Has Come》这样快节奏,rap&rock系的,感觉就是在游戏里面打击的那种节奏感;而对于那种少女系萌萌哒的页面,可能会挑选《Down by the sally garden》这种轻淡旋律,符合思春少女的心境的风格…不过背景音乐类型一般以轻音乐类型为主,作为衬托主题辅助作用,节奏太重不宜长听…
选曲风格大概就如上面所述,在页面播放背景音乐的话,一般就是进入页面,背景音乐自动响起,音量由小到大渐入,到收尾的时候,音量由大到小渐出,然后再循环这样的过程,那把上面的过程用HTML5代码转化的话,就是这样代码流程的:
首先new audio,创建一个audio音频对象,赋值音频src地址,设置loop循环, 检测它的readystatey音频当前就绪状态,等于4 HAVE_ENOUGH_DATA 的时候,表示可用数据足以开始播放,或者监听canplaythrough事件/canplay事件,canplaythrough表示 歌曲已经载入完全完成,而canplay表示 缓冲至目前可播放状态,前者是完全加载好了才播,后者是加载到当前网络状态能播就播,不一定完全加载,边播边载,可能会快一点,不过如果播一部分后网速变慢,或者断网,音乐可能就会卡顿…当加载完成后,就play播放音频,大概就是这样的流程,具体代码:
function musicPlay(){
var audio =
document_createElement_x_x("audio");
audio.src =
"media/thunder.mp3";
audio.loop =
true;
audio.load();
audio.addEventListener("canplaythrough", function(){
audio.play();
},false);
}
musicPlay();
测试地址: Demo
二维码:

上面代码看起来正常,网上找的代码也是这样的,在电脑上面播也是ok的,然后当你欢心喜地在手机上面播的时候,TNND,坑爹啊…有砸手机的冲动…就上面的流程,会发现在IOS手机上面压根就没声音好吗!玩笑不能这样开的好吗!这是想闹哪样(PS: 安卓4.1以上都是可以的)…用无线网卡+fiddler抓包调试,手机配代理后,居然可以正常播放,相当奇葩…
IOS手机请扫下面二维码:

是否听到了阵阵打雷声?与之前的代码比较,其实将 audio添加到html页面节点 而已,然后IOS就能正常识别了,这个安卓相对而言要好些…
对于背景音乐播放的,我上面提到,可以做一个“音量由小到大渐入,到收尾的时候,音量由大到小渐出”这样的效果,这样不会让用户一进页面,就马上最大音量轰炸,有多少人开会或者在图书馆被这样的突入起来的背景音乐吓到,麻烦举下手,诚实点我们还可以做朋友的…
音量的话,audio也有相应的控制属性volume,设置范围为0-1,0的时候为静音,也有一个专有静音属性muted与之对应,1的时候是音频原有音量,然后我在PC上,就写了这样一个定时器:
audio.volume=0.01;
timer_volume_up=setInterval(function(){
if(audio.volume<0.15){
audio.volume+=0.01;
}
else{
audio.volume=0.15;
clearInterval(timer_volume_up);
}
},1000);
刚播放的时候,声音音量为0.01,然后1s加0.01,直到0.15的时候,就停止,清除计数器,做一个声音渐入的效果,调节时长15s;
timer_count=setTimeout(function(){
timer_volume_down=setInterval(function(){
if(audio.volume>0.01){
audio.volume-=0.01;
}
else{
audio.volume=0.01;
clearInterval(timer_volume_down);
}

神马?你还没关注我新浪微博 - 桑尼真 ?果断走起吧,我不会晒自拍刷屏不会买面膜,有的只是吐槽跟技术类的分享,欢迎关注…
好了,前面按惯例废话了不少,下面我们来说下,音频在移动端的那些坑,坑的具体表现与填坑方式…
我私自把 音频分两种,背景音乐与音效音乐;
一、背景音乐
背景音乐,就是贯穿整个页面的音乐,一般挑选节奏与曲风页面表达主题搭配,比如旅行类的页面,我可能会挑选《Traveling Light》这样的轻快节奏的,清新乡村一点,让用户听了,感觉就真的要放下包袱去旅行的感觉;而游戏类体验类的页面,可能会挑选《The Time Has Come》这样快节奏,rap&rock系的,感觉就是在游戏里面打击的那种节奏感;而对于那种少女系萌萌哒的页面,可能会挑选《Down by the sally garden》这种轻淡旋律,符合思春少女的心境的风格…不过背景音乐类型一般以轻音乐类型为主,作为衬托主题辅助作用,节奏太重不宜长听…
选曲风格大概就如上面所述,在页面播放背景音乐的话,一般就是进入页面,背景音乐自动响起,音量由小到大渐入,到收尾的时候,音量由大到小渐出,然后再循环这样的过程,那把上面的过程用HTML5代码转化的话,就是这样代码流程的:
首先new audio,创建一个audio音频对象,赋值音频src地址,设置loop循环, 检测它的readystatey音频当前就绪状态,等于4 HAVE_ENOUGH_DATA 的时候,表示可用数据足以开始播放,或者监听canplaythrough事件/canplay事件,canplaythrough表示 歌曲已经载入完全完成,而canplay表示 缓冲至目前可播放状态,前者是完全加载好了才播,后者是加载到当前网络状态能播就播,不一定完全加载,边播边载,可能会快一点,不过如果播一部分后网速变慢,或者断网,音乐可能就会卡顿…当加载完成后,就play播放音频,大概就是这样的流程,具体代码:
function musicPlay(){
}
musicPlay();
测试地址: Demo
二维码:

上面代码看起来正常,网上找的代码也是这样的,在电脑上面播也是ok的,然后当你欢心喜地在手机上面播的时候,TNND,坑爹啊…有砸手机的冲动…就上面的流程,会发现在IOS手机上面压根就没声音好吗!玩笑不能这样开的好吗!这是想闹哪样(PS: 安卓4.1以上都是可以的)…用无线网卡+fiddler抓包调试,手机配代理后,居然可以正常播放,相当奇葩…
IOS手机请扫下面二维码:

是否听到了阵阵打雷声?与之前的代码比较,其实将 audio添加到html页面节点 而已,然后IOS就能正常识别了,这个安卓相对而言要好些…
对于背景音乐播放的,我上面提到,可以做一个“音量由小到大渐入,到收尾的时候,音量由大到小渐出”这样的效果,这样不会让用户一进页面,就马上最大音量轰炸,有多少人开会或者在图书馆被这样的突入起来的背景音乐吓到,麻烦举下手,诚实点我们还可以做朋友的…
音量的话,audio也有相应的控制属性volume,设置范围为0-1,0的时候为静音,也有一个专有静音属性muted与之对应,1的时候是音频原有音量,然后我在PC上,就写了这样一个定时器:
audio.volume=0.01;
timer_volume_up=setInterval(function(){
},1000);
刚播放的时候,声音音量为0.01,然后1s加0.01,直到0.15的时候,就停止,清除计数器,做一个声音渐入的效果,调节时长15s;
timer_count=setTimeout(function(){