JS 控制 audio 标签播放/暂停音乐

最新推荐文章于 2025-06-13 09:02:45 发布

爱睡的虫虫

最新推荐文章于 2025-06-13 09:02:45 发布

阅读量8.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： audio 音乐

本文链接：https://blog.youkuaiyun.com/feifanzhuli/article/details/78791724

CSS3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的网页音乐播放器的实现方案，通过JavaScript控制音频的播放与暂停，并使用CSS3实现播放状态的图标动画效果。代码中包含了基本的播放逻辑及用户交互功能。

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

<script type="text/javascript">
    window.onload = function(){
        /*解决不同浏览器不能播放的情况*/
        // function toggleSound() {
        //      if (audio.paused) { //判读是否播放
        //           audio.play(); //没有就播放
        //      }
  //          }
          // toggleSound();
          (function(){
                var audio = document.getElementById("audio"); 
                var musiIocn = document.getElementById("music-iocn");
                var off = document.getElementById("off");

                off.onclick = function(){
                    if(off.className == "paly"){  //如果当前播放
                        audio.pause(); //停止（暂停）
                        off.className="stop"; //暂停
                        musiIocn.src = "img/music130.png";  //暂停图片
                        musiIocn.className = " "; //取消图片360旋转CSS3动画
                    }else if(off.className == "stop"){  //如果当前暂停
                        audio.play();  //开始播放
                        off.className="paly";  //开始播放
                        musiIocn.src = "img/music131.png"; //播放图片
                        musiIocn.className = "rota";  //追加图片360旋转CSS3动画
                    } 
               }
          })();
    }
</script> 

</head>
<body>
<div class="paly" id="off">
    <img src="img/music131.png" class="rota" id="music-iocn" alt="旋转">
</div>
<audio id="audio" src="img/mp3.mp3"  loop autoplay></audio>
</body>
</html>