H5頁面背景音樂，C33 360°旋轉效果

在做H5頁面的時候，經常會需要用到背景音樂，比如電子賀卡、動態音樂相冊等，右上角有個360°旋轉的音樂圖標，點擊可以控制音樂是否播放，那這個效果是如何實現的呢？
我現整理了一下代碼：

 

 Demo 

 點擊Icon暫停，再次點擊繼續。

 

HTML代碼如下：

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

 

CSS代碼如下：

#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) }
}

使用了Keyframes 結合 transfrom 來實現CSS 360°旋轉效果。

（我的另一篇關於keyframes文章 http://www.cnblogs.com/shizq/p/5063610.html）

 

JS代碼如下：

1. 實現點擊圖標，旋轉暫停，再點擊再旋轉

$("#audio_btn").click(function(){
    $(this).toggleClass("rotate"); //控制音樂圖標 自轉或暫停
})

 

2. 圖片暫停的同時，實現背景音樂也暫停，圖片旋轉的時候，音樂也繼續播放。

結合上面的代碼，修改如下：

var x = document.getElementById("media"); 
$(function(){
    $("#audio_btn").click(function(){
        $(this).toggleClass("rotate"); //控制音樂圖標 自轉或暫停
        
        //控制背景音樂 播放或暫停            
        if($(this).hasClass("rotate")){
            x.play();
        }else{
            x.pause();
        }
    })
});

因為H5的audio/video自帶pause()和play()的方法，我們直接調用就可以了。但需要注意的是，它不是jquery的方法，如果直接寫成$(audio_btn).find("audio").pause()，是無效的。所以要用原生JS DOM來寫。