js/jquery按钮控制HTML5音乐开关

audio-play

HTML

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

<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(),两种状态切换时及时更新按钮图片,请看代码:

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?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>?

注意的是要记得加载jQuery库文件。