利用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仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html form表单基础入门案例讲解
Jul 15 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python3 max()函数基础用法
2019/02/19 Python
python实现顺时针打印矩阵
2019/03/02 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
基于Python实现粒子滤波效果
2020/12/01 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
五心教育心得体会
2014/09/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
python开发人人对战的五子棋小游戏
2022/05/02 Python