HTML5中如何实现背景音乐自动播放功能

小编给大家分享一下HTML5中如何实现背景音乐自动播放功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

音乐的自动播放属性，这里也介绍一下：

<audiocontrols="controls"autoplay="autoplay">
<sourcesrc="song.ogg"type="audio/ogg"/>
<sourcesrc="song.mp3"type="audio/mpeg"/>
Yourbrowserdoesnotsupporttheaudioelement.
</audio>

autoplay 属性规定一旦音频就绪马上开始播放。

如果设置了该属性，音频将自动播放。

但是在实际运用中，经常会遇到不能自动播放的现象，主要是因为有些浏览器或者手机会阻止或不支持autoplay这个属性，在这里我介绍一下我采用的方法。

首先：在html中代码如下

<audioid="music1"controls="controls"autoplay="autoplay"preloadid="music1"hidden>
<sourcesrc="music/bgmusic.mp3"/>
</audio>
<!--这里是音乐-->
<imgid="btn"class="active"src="img/music.png"alt=""/>
<!--这里是一个可以控制背景音乐播放暂停的开关-->

在js文件中采用如下代码

varaudio=document.getElementById('music1');
$("#btn").bind("touchstart",functionbf(){
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();
})

到了这里就实现了背景音乐的自动播放，这个办法适用于有加载页，并且需要点击进入h6的项目......

以上是“HTML5中如何实现背景音乐自动播放功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！