效果图如下所示：
查看演示效果 &nbs p; 源码下载
HT ML
建立一个 HTML5页面 ，放置<audio>标签，设置音频文件 源 ，设置循环播放。准备两张图片，分别表示开启和 暂停 背景音乐两种状态，可以点击。
XM L/HTML Code 复制内容到剪贴板
< audio id = " ;m usic2" src = "music.m P3 " loop = "loop" > 你的浏览器不支持audio标签。 </ audio > < a hr ef = "javascript: play Pause();" > < img src = "pause.gif" width = "48" h ei ght = "50" id = "music_ BT n2" 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' ; } }
如果使用 jq uery代码可以这样写：
JavaScript Code 复制内容到剪贴板
<audio id= "music" src= "http://cctv3.qiniudn .COM /zuixingfuderen.mp3" autoplay= "autoplay" loop= "loop" >你的浏览器不支持audio标签。</audio> <a id= "audio_btn" ><img src= "play.gif" width= "48" height= "50" id= "music_btn" border= "0" ></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实现使用按钮控制背景音乐开关 全部内容，希望文章能够帮你解决 利用HTML5实现使用按钮控制背景音乐开关 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用HTML5实现使用按钮控制背景音乐开关的详细内容...