HTML5的audio实现音乐的播放，暂停，音量淡入淡出

最新推荐文章于 2025-07-09 12:03:37 发布

Xaire

最新推荐文章于 2025-07-09 12:03:37 发布

阅读量8.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/u012183426/article/details/79721246

web 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的背景音乐播放功能，其中包括背景音乐的开关控制及音量渐变调整效果。通过简单的HTML结构配合JavaScript代码，实现了用户友好的交互体验。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style></style>
</head>
<body>
<h1>Audio music</h1>
<audio id="bgMusic" src="res/bg2.mp3" autoplay >
    浏览器不支持Audio标签
</audio>
<label>
    <input id="bgSwitch" type="checkbox" checked>
    是否播放背景音乐
</label>
<script>
//    console.log("test");
//    bgSwitch.onchange = function(){
//        console.log("onchange");
//        if(this.checked){
//            bgMusic.play();
//        }else{
//            bgMusic.pause();
//        }
//    }
    bgSwitch.onchange = function(){
        var v = bgMusic.volume;
        if(this.checked){
            bgMusic.volume = 0;
            v = 0;
            bgMusic.play();
            console.log("play");
            var t = setInterval(function(){
                v+= 0.1;
                console.log('v1'+v);
                if(v<=1){
                    bgMusic.volume = v;
                }else{
                    clearInterval(t);
                }
            },200);
        }else{
            var t = setInterval(function(){
                v-=0.1;
                console.log('v2'+v);
                if(v>0){
                    bgMusic.volume = v;
                }else{
                    clearInterval(t);
                    bgMusic.pause();
                    console.log("pause");
                }
            },200);
        }
    }
</script>
</body>
</html>