html:
<script src="js/jquery-2.1.3.min.js"></script> <div id="soundIconPlay" onclick="soundIconOff()" class="soundIcon soundIconPlay"></div> <div id="soundIconOff" onclick="soundIconPlay()" class="soundIcon soundIconOff hide"></div> <div class="audio" style="width:0; height:0px; overflow:hidden; text-indent:-999px;"> <audio id="bgmusic" loop="loop" autoplay="autoplay" src="images/bgmusic.mp3" controls=true></audio> </div> //关键: 先写页面再引js,否则会报Cannot read property 'pause/play' of null <script type="text/javascript"> function init() { var myAudio = document.getElementById("bgmusic"); myAudio.addEventListener('ended', loopAudio, to false ); } function loopAudio () { var myAudio = document.getElementById ( "bgmusic" ); myAudio.play (); } // Load Page background music (iOS can not be achieved, contact only analog automatic screen displays) function audioAutoPlay (ID) { var Audio = document.getElementById ( 'bgmusic' ), play = function () { audio.play (); document.removeEventListener ( "touchstart", play, to false ); }; audio.play (); document.addEventListener ("WeixinJSBridgeReady", function () { play(); }, false); document.addEventListener('YixinJSBridgeReady', function() { play(); }, false); document.addEventListener("touchstart",play, false); } audioAutoPlay('mybgaudio'); </script> <script type="text/javascript"> var oAudioOFF = "1"; var oAudio = document.getElementById('bgmusic'); function soundIconPlay(){ oAudioOFF = "1"; oAudio.play(); $('#soundIconPlay').show(); $('#soundIconOff').hide(); }; function soundIconOff(){ oAudioOFF = "0"; oAudio.pause(); $('#soundIconPlay').hide(); $('#soundIconOff').show(); }; </script>
css:
.soundIcon{ position:absolute; top:.1rem; right:.1rem; z-index:1; } .soundIconPlay{ width:.4rem; height:.4rem; background:url('../images/musicOn.png') no-repeat; background-size:100%; animation:bgRotate 1.2s infinite linear; -o-animation:bgRotate 1.2s infinite linear; -moz-animation:bgRotate 1.2s infinite linear; -webkit-animation:bgRotate 1.2s infinite linear } .soundIconOff{ width:.4rem; height:.4rem; background:url('../images/musicOff.png') no-repeat; background-size:100%; animation:initial; -o-animation:initial; -moz-animation:initial; -webkit-animation:initial } @keyframes bgRotate{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @-webkit-keyframes bgRotate{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-moz-keyframes bgRotate{ from{-moz-transform:rotate(0deg)} to{-moz-transform:rotate(360deg)} } @-o-keyframes bgRotate{ from{-o-transform:rotate(0deg)} to{-o-transform:rotate(360deg)} }