Using HTML5 to control background music switches

Sometimes we add background music to the page, allowing users to turn on and off the background music by themselves, especially multimedia pages made based on mobile html5. HTML5's audio tag can obtain the audio playback status, and the background music can be turned off and turned on by touching the button.

The renderings are as follows:

Create an HTML5 page, place the <audio> tag, set the audio file source, and set loop playback. Prepare two pictures, indicating the two states of turning on and pausing background music, you can click.

XML/HTML Code Copy content to clipboard

1. <audioid=music2src=music.mp3loop=loop>Your browser does not support the audio tag. </audio>
2. <ahref=javascript:playPause();><imgsrc=pause.gifwidth=48height=50id=music_btn2border=0></a>

When we clicked the switch image button, we called the javascript script and the playPause() function. In the function, judge the audio audio playback status. If it has been stopped (paused), call .play() to continue playing. If it is in the playback status, playback. Pause() will be immediately suspended. When switching between the two states, please see the code:

JavaScript Code Copy content to clipboard

1. functionplayPause(){
2. varmusic=document.getElementById('music2');
3. varmusic_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 Code Copy content to clipboard

1. <audioid=musicsrc=http://cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop>Your browser does not support the audio tag. </audio>
2. <aid=audio_btn><imgsrc=play.gifwidth=48height=50id=music_btnborder=0></a>
3. <script>
4. $(#audio_btn).click(function(){
5. varmusic=document.getElementById(music);
6. if(music.paused){
7. music.play();
8. $(#music_btn).attr(src,play.gif);
9. }else{
10. music.pause();
11. $(#music_btn).attr(src,pause.gif);
12. }
13. });
14. </script>