音频播放(audio)
功能:播放和暂停音频
代码如下
<div id="btn">点击播放音乐:<img src="images/pause.png" alt="播放" style="width: 50px; height: 50px;"></div>
<audio loop id="audio">
<!-- 兼容各浏览器播放格式 -->
<!-- controls显示样式,loop循环播放,autoplay自动播放 -->
<source src="media/lol.mp3">
<source src="media/lol.ogg">
<source src="media/lol.wav">
抱歉,你的浏览器不支持音频标签
</audio>
<script>
var audio = document.querySelector("#audio");
var btn = document.querySelector("#btn");
var btn_bg = btn.children[0];
console.log(btn_bg);
btn.onclick = function(){
if(audio.paused){
btn_bg.src = "images/play.png";
audio.play();
}else{
btn_bg.src = "images/pause.png";
audio.pause();
}
}
</script>
用到的两张图片
pause.png:
play.png: