利用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实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
windows下更新npm和node的方法
2017/11/30 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
django跳转页面传参的实现
2020/09/17 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
C语言开发工程师测试题
2016/12/20 面试题
金融专业大学生自我评价
2014/01/09 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL