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

最新推荐文章于 2022-07-27 17:10:26 发布

FantasticBB

最新推荐文章于 2022-07-27 17:10:26 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/squirrelnald/article/details/53486804

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

html

4 篇文章

订阅专栏

本文介绍如何实现点击图片来控制背景音乐的播放与暂停，并同时更新播放图标为静音图标或播放图标。点击播放图标开始播放音乐，再次点击则切换到静音并停止播放。相反，点击静音图标会重新开始播放音乐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：
点击播放图标，背景音乐开始播放；
再次点击播放图标，图标更替为静音图标，背景音乐停止；
点击静音图标，图标更替为播放图标，背景音乐从头播放；
… …

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