·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]html5音乐控制关闭开启源代码

时间:2016-07-11 14:36酷播
[html5]html5音乐控制关闭开启源代码

[html5]html5音乐控制关闭开启源代码

  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> 
  1. <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script><script> 
  2. $("#audio_btn").click(function(){ 
  3.     var music = document.getElementById("music"); 
  4.     if(music.paused){ 
  5.         music.play(); 
  6.         $("#music_btn").attr("src","play.gif"); 
  7.     }else{ 
  8.         music.pause(); 
  9.         $("#music_btn").attr("src","pause.gif"); 
  10.     } 
  11. }); 
  12.  
  13. function playPause() { 
  14.     var music = document.getElementById('music2'); 
  15.     var music_btn = document.getElementById('music_btn2'); 
  16.     if (music.paused){ 
  17.         music.play(); 
  18.         music_btn.src = 'play.gif'
  19.     } 
  20.     else{ 
  21.         music.pause(); 
  22.         music_btn.src = 'pause.gif';  
  23.     } 
  24. </script> 

 

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!