使用按钮控制HTML5背景音乐开关 | 您所在的位置:网站首页 › html中加音乐 › 使用按钮控制HTML5背景音乐开关 |
HTML
建立一个HTML5页面,放置标签,设置音频文件源,设置循环播放。准备两张图片,分别表示开启和暂停背景音乐两种状态,可以点击。 你的浏览器不支持audio标签。 Javascript我们在点击开关图片按钮的时候调用了javascript脚本,playPause()函数。函数中判断audio音频播放状态,如果已经停止(paused)则调用.play()继续播放,如果是在播放状态,则立即暂停播放.pause(),两种状态切换时及时更新按钮图片,请看代码: 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代码可以这样写: 你的浏览器不支持audio标签。 $("#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"); } });注意的是要记得加载jQuery库文件。 |
CopyRight 2018-2019 实验室设备网 版权所有 |