HTML5 method to use buttons to control background music switch

This article mainly introduces the method of using buttons to control the background music switch in HTML5. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

We sometimes put it on the page Adding background music allows users to turn on and off the background music themselves, especially for multimedia pages based on mobile phone HTML5. The audio audio tag of HTML5 can obtain the playback status of the audio, and the background music can be turned off and on by touching the button.

The rendering is as follows:

View the demonstration effect and download the source code

##HTML

Create an HTML5 page, place the b97864c2e0ef2353a16c4d64c7734e92 tag, set the audio file source, and set loop playback. Prepare two pictures, which represent the two states of turning on and pausing background music, which can be clicked.

XML/HTML

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    
<a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>

Javascript

We called the javascript script when clicking the switch image button, playPause( )function. The function determines the audio playback state. If it has 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

function playPause() {    
    var music = document.getElementById('music2');    
    var music_btn = document.getElementById('music_btn2');    
    if (music.paused){    
        music.play();    
        music_btn.src = 'play.gif';    
    }    
    else{    
        music.pause();    
        music_btn.src = 'pause.gif';     
    }    
}   如果使用jQuery代码可以这样写：

JavaScript

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 page to implement messages and replies

The above is the detailed content of HTML5 method to use buttons to control background music switch. For more information, please follow other related articles on the PHP Chinese website!