作者:mobiledu2502923043 | 来源:互联网 | 2017-05-11 14:13
我们有时会在页面上加上背景音乐,允许用户自己开启和关闭背景音乐,尤其基于手机html5制作的多媒体页面,HTML5的audio音频标签可以获取音频的播放状态,通过触摸按钮就可以关闭和开启背景音乐。
效果图如下所示:
查看演示效果 源码下载
HTML
建立一个HTML5页面,放置标签,设置音频文件源,设置循环播放。准备两张图片,分别表示开启和暂停背景音乐两种状态,可以点击。 XML/HTML Code 复制内容到剪贴板
< audio id = "music2" src = "music.mp3" loop = "loop" > 你的浏览器不支持audio标签。 audio >
< 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 复制内容到剪贴板
function playPause() {
var music = document.getElementById( 'music2' );
var music_btn = document.getElementById( 'music_btn2' );
if (music.paused){
music.play();
music_btn.src = 'play.gif' ;
}
else {
music.pause();
music_btn.src = 'pause.gif' ;
}
}
如果使用jQuery代码可以这样写: Javascript Code 复制内容到剪贴板
"music" src= "http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay= "autoplay" loop= "loop" >你的浏览器不支持audio标签。
"audio_btn" >"play.gif" width= "48" height= "50" id= "music_btn" border= "0" >