网页自动播放背景音乐

2017-10-22  本文已影响58人  honaf

我们有时候希望自己的文章带有背景音乐,使用audio很方便实现,添加属性autoplay="autoplay"

<audio src="lucky.mp3"  id="music" autoplay="autoplay"></audio>

考虑到在手机方面大多默认禁止自动播放,如果弄个按钮点击,搞得又不太智能,所以想到在用户触摸屏幕时开启播放

document.addEventListener('touchstart',function(){
       document.getElementById('music').play();
}, true);  

经过测试发现在iphone上,再次滑动屏幕音乐会停顿,停下来又继续播放,整体就造成了有点卡顿的假象,然后就加了个判断,还是有点作用

var played = false;
document.addEventListener('touchstart',function(){
       if (played == false) {
              played = true;
              document.getElementById('music').play();
       }                 
}, false);  
上一篇下一篇

猜你喜欢

热点阅读