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


Posted in HTML / CSS onSeptember 21, 2015

效果图如下所示:

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

查看演示效果    源码下载

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>   
HTML / CSS 相关文章推荐
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 #HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 #HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 #HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 #HTML / CSS
详解HTML5中ol标签的用法
Sep 08 #HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 #HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 #HTML / CSS
You might like
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
基于python的Paxos算法实现
2019/07/03 Python
python输入错误后删除的方法
2019/10/12 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
用python对oracle进行简单性能测试
2020/12/05 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
婚庆公司计划书
2014/09/15 职场文书
常住证明范本
2015/06/23 职场文书
实验室安全管理制度
2015/08/05 职场文书
《实心球》教学反思
2016/02/23 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript