页面添加h5背景音乐

Posted 2020-10-06 Jee

<div id="audio_btn" class="rotate">
    <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio>
</div>

#audio_btn {
     width: 30px;
     height: 30px;
     background-image: url(normalmusic.svg);
     background-size: contain;
 }
 
 .rotate {
    -webkit-animation: rotating 1.2s linear infinite;
     -moz-animation: rotating 1.2s linear infinite;
     -o-animation: rotating 1.2s linear infinite;
     animation: rotating 1.2s linear infinite
 }
 
 @-webkit-keyframes rotating {
     from { -webkit-transform: rotate(0) }
     to { -webkit-transform: rotate(360deg) }
 }
 
 @keyframes rotating {
     from { transform: rotate(0) }
     to { transform: rotate(360deg) }
 }
 @-moz-keyframes rotating {
     from { -moz-transform: rotate(0) }
     to { -moz-transform: rotate(360deg) }
 }



$("#audio_btn").click(function(){
     $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
 })
var x = document.getElementById("media"); 
 $(function(){
     $("#audio_btn").click(function(){
         $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
         
         //控制背景音乐 播放或暂停            
         if($(this).hasClass("rotate")){
             x.play();
         }else{
             x.pause();
         }
     })
 });