HTML5实现使用按钮控制背景音乐开关的方法

百变鹏仔 2个月前 (10-18) #H5教程

文章标签背景音乐

这篇文章主要介绍了关于html5实现使用按钮控制背景音乐开关的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

我们有时会在页面上加上背景音乐，允许用户自己开启和关闭背景音乐，尤其基于手机html5制作的多媒体页面，HTML5的audio音频标签可以获取音频的播放状态，通过触摸按钮就可以关闭和开启背景音乐。

效果图如下所示：

查看演示效果源码下载

HTML

建立一个HTML5页面，放置标签，设置音频文件源，设置循环播放。准备两张图片，分别表示开启和暂停背景音乐两种状态，可以点击。

XML/HTML

立即学习“前端免费学习笔记（深入）”；

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    <a href="javascript:playPause();"><img  src="pause.gif"    style="max-width:90%"  style="max-width:90%" id="music_btn2" border="0" alt="HTML5实现使用按钮控制背景音乐开关的方法" ></a>

Javascript

我们在点击开关图片按钮的时候调用了javascript脚本，playPause()函数。函数中判断audio音频播放状态，如果已经停止（paused）则调用.play()继续播放，如果是在播放状态，则立即暂停播放.pause()，两种状态切换时及时更新按钮图片，请看代码：
JavaScript

function playPause() {        var music = document.getElementById(&#39;music2&#39;);        var music_btn = document.getElementById(&#39;music_btn2&#39;);        if (music.paused){            music.play();            music_btn.src = &#39;play.gif&#39;;        }        else{            music.pause();            music_btn.src = &#39;pause.gif&#39;;         }    }   如果使用jQuery代码可以这样写：

JavaScript

<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>    <a id="audio_btn"><img  src="play.gif"    style="max-width:90%"  style="max-width:90%" id="music_btn" border="0" alt="HTML5实现使用按钮控制背景音乐开关的方法" ></a>    <script>    $("#audio_btn").click(function(){        var music = document.getElementById("music");        if(music.paused){            music.play();            $("#music_btn").attr("src","play.gif");        }else{            music.pause();            $("#music_btn").attr("src","pause.gif");        }    });    </script>

文章推荐

HTML5实现使用按钮控制背景音乐开关的方法

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集