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

[html5]实现js控制HTML5音乐播放器的暂停与播放

时间:2017-03-03 15:23酷播
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现

实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现。 

首先在网页中嵌入背景音乐,html5代码为:

  1. <script src="http://wuover.qiniudn.com/jquery.js"></script> 
  2.     <a class="mscBtn" id="audioBtn" title='最幸福的人' style="cursor:pointer;"></a> 
  3.     <audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay"></audio> 

通过audio的id即可控制音乐的播放(play())和暂停(pause()),同时通过改变class改变按钮的背景图片,js代码为(切记要引入jq库):

  1. $(function(){ 
  2. var music = document.getElementById("bgMusic"); 
  3. $("#audioBtn").click(function(){ 
  4. if(music.paused){music.play(); 
  5. $("#audioBtn").removeClass("pause").addClass("play"); 
  6. }else{music.pause(); 
  7. $("#audioBtn").removeClass("play").addClass("pause");}}); 
  8. }); 

css样式为:

  1. .pause {background-position: 0 bottom;} 
  2. .mscBtn {height: 50px; 
  3. background: #fff url(http://cctv2.qiniudn.com/musicbtn.png) no-repeat; 
  4. display: block;} 

来源:http://www.mizuiren.com/327.html

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