文件下载：音乐自动播放（兼容微信）.zip
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style type="text/css"> #play_btn { position: absolute; right: 6%; top: 6%; width: 24px; height: 24px; overflow: hidden; background-color: #000; border: solid 3px #ccc; border-radius: 50%; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } #play_btn button { display: inline-block; width: 24px; height: 24px; background-image: url(music.png); background-repeat: no-repeat; background-position: center; background-size: 45%; background-color: transparent; border: none; } #play_btn audio { width: 0px; height: 0px; overflow: hidden; visibility: hidden; } #play_btn.play { -webkit-animation: play 3s linear infinite; -moz-animation: play 3s linear infinite; -ms-animation: play 3s linear infinite; animation: play 3s linear infinite; } #play_btn.pause { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } @keyframes play { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes play { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes play { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-ms-keyframes play { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } </style> </head> <body> <div id="play_btn"> <button type="button"></button> <audio src="Hebe-A_little_happiness.aac" loop preload></audio> </div> <script> /* touchstart,DOMContentLoaded无法在jQuery.ready里执行监听操作 */ function autoPlay() { /* 自动播放音乐效果，解决浏览器或者APP自动播放问题 */ function musicInBrowserHandler() { audioToggle(true); document.body.removeEventListener('touchstart', musicInBrowserHandler); } document.body.addEventListener('touchstart', musicInBrowserHandler); /* 自动播放音乐效果，解决微信自动播放问题 */ function musicInWeixinHandler() { audioToggle(true); document.addEventListener('WeixinJSBridgeReady', function() { audioToggle(true); }, false); document.addEventListener('YixinJSBridgeReady', function() { audioToggle(true); }, false); document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); } document.addEventListener('DOMContentLoaded', musicInWeixinHandler); } autoPlay(); // ==================================================== function audioToggle(isPlay) { var playBtn = document.getElementById('play_btn'); var audio = playBtn.getElementsByTagName('audio')[0]; if (typeof(isPlay) == 'undefined') { isPlay = !!audio.paused; } var space = String.fromCharCode(32); // 空格 var playBtnClass = space + (playBtn.getAttribute('class') || (isPlay ? 'play' : 'pause')) + space; if (isPlay) { playBtnClass = playBtnClass.replace(space + 'pause' + space, space + 'play' + space); audio.play(); } else { playBtnClass = playBtnClass.replace(space + 'play' + space, space + 'pause' + space); audio.pause(); } playBtn.className = playBtnClass.replace(/(^s*)|(s*$)/g, ''); } document.getElementById('play_btn').onclick = function() { audioToggle(); } </script> </body> </html>