css代码(让音乐小图片在播放的时候自动旋转):
.close_music_div img{animation:run 5s linear 0s infinite;}@keyframes run{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}
html代码:
<div class="zp-bg-music"><p class="close_music_div"><a onclick="pauseVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p><p class="open_music_div"><a onclick="playVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p><audio id="bg-music" autoplay preload="auto" src="img/zp/bgmusic.mp3" loop="loop"></audio></div>
js代码:
$(document).ready(function(){playVid();});var myVideo=document.getElementById("bg-music");function playVid(){myVideo.play();$(".close_music_div").show();$(".open_music_div").hide();}function pauseVid(){myVideo.pause();$(".close_music_div").hide();$(".open_music_div").show();}
1、audio的属性可查w3c,里面写的很详细,加上autoplay就是自动播放的意思。
2、百度上很多说移动端(手机)设置了不能自动播放,因为浪费用户流量,但经实际测试,以上代码可行。
3、pc的就不能自动播放了,会报错,需要到浏览器里面自行设置,以chrome浏览器为例:
在浏览器输入 chrome://flags/#autoplay-policy
第一个选项 Autoplay policy 设置为 no user gesture is required
4、然后下面是在测试之前百度的别人的方法,忘记链接地址了,也是可以参考的(针对移动端不能自动播放,因为觉得代码反锁所以自己改成了上面的那种形式),没有测试过:
$(document).ready(function(){autoPlayMusic();audioAutoPlay();});function openmusic(){autoPlayMusic();audioAutoPlay();$(".close_music_div").css({"display":"block"});$(".open_music_div").css({"display":"none"});}function pauseAuto(){var myaudio = document.getElementById('bg-music');myaudio.pause();$(".close_music_div").css({"display":"none"});$(".open_music_div").css({"display":"block"});}function audioAutoPlay() {var myaudio = document.getElementById('bg-music');myaudio.play();document.addEventListener("WeixinJSBridgeReady", function () {myaudio.play();}, false);}// 音乐播放function autoPlayMusic() {// 自动播放音乐效果,解决浏览器或者APP自动播放问题function musicInBrowserHandler() {musicPlay(true);document.body.removeEventListener('touchstart', musicInBrowserHandler);}document.body.addEventListener('touchstart', musicInBrowserHandler);// 自动播放音乐效果,解决微信自动播放问题function musicInWeixinHandler() {musicPlay(true);document.addEventListener("WeixinJSBridgeReady", function () {musicPlay(true);}, false);document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);}document.addEventListener('DOMContentLoaded', musicInWeixinHandler);}function musicPlay(isPlay) {var media = document.querySelector('#bg-music');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}}