利用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实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 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 设计模式之 单例模式
2008/12/19 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
laravel 数据验证规则详解
2019/10/23 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
实现Python与STM32通信方式
2019/12/18 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
端口镜像是怎么实现的
2014/03/25 面试题
2014年班组工作总结
2014/11/20 职场文书
大专护理专业自荐信
2015/03/25 职场文书
投资入股协议书
2016/03/22 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
pandas中关于apply+lambda的应用
2022/02/28 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL