您的位置：首页 > Web前端 > JavaScript

点击图片，背景音乐播放/停止，播放图标/静音图标随之更换

2016-12-06 14:44 399 查看

目标：

点击播放图标，背景音乐开始播放；

再次点击播放图标，图标更替为静音图标，背景音乐停止；

点击静音图标，图标更替为播放图标，背景音乐从头播放；

… …

<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也是可以点击的-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： audio html javascript

相关文章推荐

新的分享

章节导航