目标:
点击播放图标,背景音乐开始播放;
再次点击播放图标,图标更替为静音图标,背景音乐停止;
点击静音图标,图标更替为播放图标,背景音乐从头播放;
… …
<head>
<script>
window.onload = function(){
var audio = document.getElementById('music');
audio.pause();//打开页面时无音乐
}
function play() {
var audio = document.getElementById('music');
if (audio.paused) {
audio.play();
document.getElementById('musicImg').src="images/play.png";
}else{
audio.pause();
audio.currentTime = 0;//音乐从头播放
document.getElementById('musicImg').src="images/stop.png";
}
}
</script>
</head>
<audio id="music" src="sounds/windtreesnow.mp3" loop="loop" autoplay></audio>
<img id="musicImg" src="images/stop.png" onClick="play()" alt="musicImg"/>
<!--img也是可以点击的-->