在做H5頁面的時候，經常會需要用到背景音樂，比如電子賀卡、動態音樂相冊等，右上角有個360°旋轉的音樂圖標，點擊可以控制音樂是否播放，那這個效果是如何實現的呢？
我現整理了一下代碼：
Demo
點擊Icon暫停，再次點擊繼續。
HTML代碼如下：
1 <div id="audio_btn" class="rotate"> 2 <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio> 3 </div>
CSS代碼如下：
1 #audio_btn {
2 width: 30px;
3 height: 30px;
4 background-image: url(normalmusic.svg);
5 background-size: contain;
6 }
7
8 .rotate {
9 -webkit-animation: rotating 1.2s linear infinite;
10 -moz-animation: rotating 1.2s linear infinite;
11 -o-animation: rotating 1.2s linear infinite;
12 animation: rotating 1.2s linear infinite
13 }
14
15 @-webkit-keyframes rotating {
16 from { -webkit-transform: rotate(0) }
17 to { -webkit-transform: rotate(360deg) }
18 }
19
20 @keyframes rotating {
21 from { transform: rotate(0) }
22 to { transform: rotate(360deg) }
23 }
24 @-moz-keyframes rotating {
25 from { -moz-transform: rotate(0) }
26 to { -moz-transform: rotate(360deg) }
27 }
使用了Keyframes 結合 transfrom 來實現CSS 360°旋轉效果。
JS代碼如下：
1. 實現點擊圖標，旋轉暫停，再點擊再旋轉
1 $("#audio_btn").click(function(){
2 $(this).toggleClass("rotate"); //控制音樂圖標 自轉或暫停
3 })
2. 圖片暫停的同時，實現背景音樂也暫停，圖片旋轉的時候，音樂也繼續播放。
結合上面的代碼，修改如下：
1 var x = document.getElementById("media");
2 $(function(){
3 $("#audio_btn").click(function(){
4 $(this).toggleClass("rotate"); //控制音樂圖標 自轉或暫停
5
6 //控制背景音樂 播放或暫停
7 if($(this).hasClass("rotate")){
8 x.play();
9 }else{
10 x.pause();
11 }
12 })
13 });
因為H5的audio/video自帶pause()和play()的方法，我們直接調用就可以了。但需要注意的是，它不是jquery的方法，如果直接寫成$(audio_btn).find("audio").pause()，是無效的。所以要用原生JS DOM來寫。