利用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 动画技术
Jul 27 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python 字典套字典或列表的示例
2019/12/16 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
高中历史教学反思
2014/02/08 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
经费申请报告范文
2015/05/18 职场文书
社区党务工作总结2015
2015/05/19 职场文书
在校生证明
2015/06/17 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Python字典的基础操作
2021/11/01 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers