导读 摘要 今天小编跟大家讲解下有关h5网页加背景音乐 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关h5网页加背景音乐 的相关...
摘要 今天小编跟大家讲解下有关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'); });});来源:爱蒂网
版权声明:本文由用户上传,如有侵权请联系删除!