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

日期:2021-01-19 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

实际效果图以下所示:

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

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>