• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

利用HTML5实现使用按钮控制背景音乐开关

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果图如下所示：

查看演示效果    源码下载

HTML

建立一个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>   

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
深入解析HTML5的IndexedDB索引数据库发布时间：2022-06-21
下一篇：
简单介绍HTML5中audio标签的使用发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap