常用----音樂切換

音樂按鈕自動以旋轉以及音樂切換【mu1.png和mu2.png對應音樂播放按鈕切換，music爲音樂資源】

HTML:(bf爲音樂以及效果切換函數)

<audio controls="controls"  loop="loop" id="music1" autoplay hidden>
    <source src="img/music.mp3" type="audio/mp3">
</audio>
<div id="musicbtn" onclick="bf()"></div>

JS:(注意：使用jquery或者zepto或者原生js時候，記得使用對應的樣式函數去做修改；獲取audio時候使用原生js獲取做好)

 //            音樂播放切換
    function bf(){
        var audio = document.getElementById('music1');
        if(audio!==null){
            //檢測播放是否已暫停.audio.paused 在播放器播放時返回false.
            if(audio.paused){
                $("#musicbtn").css({"background":"url('img/mu2.png') no-repeat","animation":"rotate 3s linear infinite"})
                audio.play();//audio.play();// 這個就是播放
            }else{
                $("#musicbtn").css({"background":"url('img/mu1.png') no-repeat","animation":"none"})
                audio.pause();// 這個就是暫停
            }
            $("#musicbtn").css("backgroundSize","cover")
        }
    }

CSS:

/*音樂*/
#musicbtn{
    position:fixed;
    width: 0.8rem;
    height:0.8rem;
    background: url("../img/mu2.png");
    background-size: cover;
    background-repeat: no-repeat;
    right: 0;
    margin-top: 0.6rem;
    margin-right: 0.5rem;
    z-index: 2;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}