之前在做一个项目的时候,产品经理提出一个页面自动播放音频的需求。

一开始直接用上audio标签加上autoplay属性,但是一经测试,兼容性却很一般。

经过网上查找资料和一番探索,实践,总结得出的结论如下:

#PC端

  1. 对于支持

  1. 对于不支持audio标签的浏览器,主要是ie8及以下。使用标签配合ie条件注释来实现。
    1
    2
    3
    <!--[if lte IE 10]>
    <embed type="audio/midi" src="../audio/secretary.mp3" style='display:none' autostart=true loop=false></embed>
    <![endif]-->

标签的相关属性:
1、自动播放:
语法:autostart=true、false
说明:该属性规定音频或视频文件是否在下载完之后就自动播放。
true:音乐文件在下载完之后自动播放;
false:音乐文件在下载完之后不自动播放。

2、循环播放:
语法:loop=正整数、true、false
说明:该属性规定音频或视频文件是否循环及循环次数。
属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;
属性值为true时,音频或视频文件循环;
属性值为false时,音频或视频文件不循环。

3、面板显示:
语法:hidden=ture、no
说明:该属性规定控制面板是否显示,默认值为no。
ture:隐藏面板;
no:显示面板。

4、开始时间:
语法:starttime=mm:ss(分:秒)
说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。

#移动端

因此只能借助用户的操作来触发播放,在移动端上,用户会习惯的来进行触摸屏幕来看页面,那就借助监听touchstart事件来触发播放,模拟自动播放的效果。经过与产品沟通,最终采用这种解决方案。

1
2
3
4
5
6
7
8
9
var audio = window.document.getElementById('audio');
var that=this;
window.document.addEventListener('touchstart', function(){
if(that.once==true&&(that.$route.path=='/')){
that.once=false;
audio.play();
}
}, false);
/*once变量用于阻止多次播放,由于是单页应用,需求是只能是首页自动播放,因此加上路由判断*/

微信浏览器中,可借助js sdk实现自动播放

1
2
3
document.addEventListener("WeixinJSBridgeReady", function () {  
play();
}, false);