摘要 今天小编跟大家讲解下有关h5网页加背景音乐 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关h5网页加背景音乐 的相关资料，

今天小编跟大家讲解下有关h5网页加背景音乐 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关h5网页加背景音乐 的相关资料，希望小伙伴们看了有所帮助。

html插入mp3代码:

<audio autoplay="autoplay" loop="true" id="bg-music"><source src="http://www.aidi.net.cn/article/detial/7298/./images/haimianbaobao.mp3"></audio>

上面的代码在浏览器是不显示的 因此 我们给个div放播放的图标：

<div id="musicbutton" class=""></div>

图标的相关css代码：

#musicbutton { width: 30px; height: 30px; position: absolute; right: 10px; top: 10px; background: url('../images/musicbutton.svg')no-repeat; background-size: 100%;}.playmusic { animation: rotate 3s linear infinite;}@keyframes rotate { from { transform: rotate(0deg) } to { transform: rotate(359deg) }}

到此 这些代码在微信上测试可以自动播放 但是在一些浏览器不可以自动播放 因此我们给图片点击 开始播放 再次点击 暂停播放：

$(function() { var music = document.getElementById("bg-music"); //给图标添加点击事件 $("#musicbutton").click(function() { if (music.paused) { music.play(); // $('#musicbutton').addClass('playmusic'); } else { music.pause();//播放暂停 $('#musicbutton').removeClass('playmusic');//图标旋转暂停 } }); //监听播放转态 播放中 让图片不停地旋转 music.addEventListener("playing", function() { $('#musicbutton').addClass('playmusic'); });});

来源：爱蒂网