Home > Web Front-end > H5 Tutorial > Using HTML5 to control the background music switch using buttons_html5 tutorial skills

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 15:46:18
Original
3035 people have browsed it

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. }  

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>   
Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
html5 validation for symfony 2.1
From 1970-01-01 08:00:00
0
0
0
The difference between HTML and HTML5
From 1970-01-01 08:00:00
0
0
0
html5 show hide
From 1970-01-01 08:00:00
0
0
0
Can PDF files run HTML5 and Javascript?
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template