Shulou(Shulou.com)06/03 Report--

This article shows you how to use buttons to control the HTML5 background music switch, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

We sometimes add background music to the page to allow users to turn on and off background music, especially for multimedia pages made by mobile phone html5. HTML5's audio audio tag can obtain the playback status of the audio, and the background music can be turned off and on at the touch of a button.

HTML

Create a HTML5 page, place tags, set the audio file source, and set up loop playback. Prepare two pictures to show the two states of turning on and pausing the background music, which can be clicked.

Your browser does not support audio tags.

Javascript

We call the javascript script, the playPause () function, when we click the switch picture button. Function to determine the playback status of audio audio. If you have stopped (paused), call .play () to continue playback. If you are in playback state, pause the playback immediately. Update the button image in time when switching between the two states. Please see the code:

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';}}

If you use jQuery code, you can write:

Your browser does not support audio tags.

("# 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");}})

Be careful to remember to load the jQuery library file.

The above content is how to use the button to control the HTML5 background music switch, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.