运用HTML5完成应用按钮操纵情况歌曲电源开关

日期：2021-02-24 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

实际效果图以下所示：

查询演试实际效果    源代码免费下载

HTML

创建1个HTML5网页页面，置放<audio>标识，设定声频文档源，设定循环系统播发。提前准备两张照片，各自表明打开和中止情况歌曲两种情况，能够点一下。
 
XML/HTML Code拷贝內容到剪贴板

  1. <audio id="music2" src="music.mp3"  loop="loop">你的访问器不适用audio标识。</audio>    
  2. <a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>  

Javascript

大家在点一下电源开关照片按钮的情况下启用了javascript脚本制作，playPause()涵数。涵数中分辨audio声频播发情况，假如早已终止（paused）则启用.play()再次播发，假如是在播发情况，则马上中止播发.pause()，两种情况切换时立即升级按钮照片，请看编码：
 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. }   

假如应用jQuery编码能够这样写：
 
JavaScript Code拷贝內容到剪贴板

  1. <audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的访问器不适用audio标识。</audio>    
  2. <a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>    
  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>   
上一篇：LocalStorage记牢客户和登陆密码作用 返回下一篇：没有了