Using HTML5 to implement the use of buttons to control the background music switch _ html5 tutorial skills-

We sometimes add background music on the page, allowing users to enable and disable background music themselves, especially multimedia pages created based on mobile html5. The HTML5 audio tag can obtain the playing status of the audio, you can click the button to close or enable background music. As follows:

View demo source code download

HTML

Create an HTML5 page, place tags, set the audio file source, and set loop playback. Prepare two images, indicating that the background music is enabled and paused. You can click.

Copy XML/HTML Code to clipboard

1. Your browser does not support the audio tag.

Javascript

When we click the "Switch image" button, we call the javascript script, playPause () function. The function is used to determine the audio playback status. It is called if the audio has been stopped (paused. play () continues playing. If it is in the playing status, it is paused immediately. pause (). When two statuses are switched, the button image is updated in time. See the Code:
Copy the content to the clipboard using JavaScript Code

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 jQuery code is used, you can write as follows:

Copy the content to the clipboard using JavaScript Code

1. "Music" src = "http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay = "autoplay" loop = "loop"> your browser does not support audio labels.
2. "Audio_btn"> "play.gif" width = "48" height = "50" id = "music_btn" border = "0">
3. Script
4. $ ("# Audio_btn"). click (function (){
5. Var music = 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