Using HTML5 to control the background music switch using buttons_html5 tutorial skills

The rendering is as follows:

View the demo effect Source code download

HTML

Create an HTML5 page, place the

1. <audio id="music2" src="music.mp3" loop="loop">Your browser does not support the audio tag. audio> 
2. <a href="javascript: playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0">a> 

Javascript

We called the javascript script, playPause() function when we clicked the switch image button. The function determines the audio playback state. If it has been stopped (paused), call .play() to continue playing. If it is in the playing state, immediately pause playback.pause(). When the two states switch, the button image is updated in time. Please see Code:
JavaScript CodeCopy content to clipboard

1. function playPause() {
2.  var music = document.getElementById('music2'); 
3.  var music_btn = document.getElementById('music_btn2'); 
4. if (music.paused){ ​​
5. music.play();
6. music_btn.src = 'play.gif';
7. }  
8.  else{ 
9. music.pause();
10. music_btn.src = 'pause.gif';
11. }  
12. } 

If you use jQuery code, you can write it like this:

JavaScript CodeCopy content to the clipboard

1. "music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。    
2. "audio_btn">"play.gif" width="48" height="50" id="music_btn" border="0">    
3. <script>    </span> </li> <li> <span>$(</span><span class="string">"#audio_btn"</span><span>).click(</span><span class="keyword">function</span><span>(){    </span> </li> <li class="alt"> <span>    </span><span class="keyword">var</span><span> music = document.getElementById(</span><span class="string">"music"</span><span>);    </span> </li> <li> <span>    </span><span class="keyword">if</span><span>(music.paused){    </span> </li> <li class="alt"> <span>        music.play();    </span> </li> <li> <span>        $(</span><span class="string">"#music_btn"</span><span>).attr(</span><span class="string">"src"</span><span>,</span><span class="string">"play.gif"</span><span>);    </span> </li> <li class="alt"> <span>    }</span><span class="keyword">else</span><span>{    </span> </li> <li> <span>        music.pause();    </span> </li> <li class="alt"> <span>        $(</span><span class="string">"#music_btn"</span><span>).attr(</span><span class="string">"src"</span><span>,</span><span class="string">"pause.gif"</span><span>);    </span> </li> <li> <span>    }    </span> </li> <li class="alt"> <span>});    </span> </li> <li> <span></script>