关于h5中背景音乐的自动播放效果的实现
导读:收集整理的这篇文章主要介绍了关于h5中背景音乐的自动播放效果的实现,觉得挺不错的,现在分享给大家,也给大家做个参考。音乐的自动播放属性,这里也介绍一下:<audio controls="controls" autoplay="auto...
收集整理的这篇文章主要介绍了关于h5中背景音乐的自动播放效果的实现,觉得挺不错的,现在分享给大家,也给大家做个参考。音乐的自动播放属性,这里也介绍一下:audio controls="controls" autoplay="autoplay"> source src="song.ogg" tyPE="audio/ogg" /> source src="song.mP3" type="audio/mpeg" /> Your browser does not support the audio element./audio>
autoplay 属性规定一旦音频就绪马上开始播放。
如果设置了该属性,音频将自动播放。
但是在实际运用中,经常会遇到不能自动播放的现象,主要是因为有些浏览器或者手机会阻止或不支持autoplay这个属性,在这里我介绍一下我采用的方法。
首先:在htML中代码如下
audio id="music1" controls="controls" autoplay="autoplay" PReload id="music1" hidden> source src="music/bgmusic.mp3" /> /audio> !--这里是音乐--> img id="BTn" class="active" src="img/music.png" alt="" /> !--这里是一个可以控制背景音乐播放暂停的开关-->
在js文件中采用如下代码
VAR audio = document.getElementById('music1'); $("#btn").bind("touchstart", function bf() { if(audio !== null) { //检测播放是否已暂停.audio.paused 在播放器播放时返回false.//alert(audio.paused); if(audio.paused) { audio.play(); //audio.play(); // 这个就是播放$("#btn").addClass("active")} else { audio.pause(); // 这个就是暂停$("#btn").removeClass("active")} } } )
写到了这里大部分安卓机就基本可以实现自动播放了,但是苹果手机在这个时候还是不行的
这里我采用了一个在加载页中加入一个按钮,当加载完成的时候,点击按钮,引导用户完成背景音乐的自动播放,代码如下:
$("html").one('touchstart',function(){ audio.play(); } )
到了这里就实现了背景音乐的自动播放,这个办法适用于有加载页,并且需要点击进入h5的项目......
以上就是关于h5中背景音乐的自动播放效果的实现的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 关于h5中背景音乐的自动播放效果的实现
本文地址: https://pptw.com/jishu/583623.html