html网页制作之音乐播放器

最新推荐文章于 2025-04-07 13:13:30 发布

不蒸馒头曾口气

最新推荐文章于 2025-04-07 13:13:30 发布

阅读量4.3k

点赞数 27

分类专栏：网页制作文章标签： html 前端 vscode css js

本文链接：https://blog.youkuaiyun.com/qq_62652856/article/details/136480200

版权

网页制作专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个音乐播放器，包括唱片播放/暂停功能，动态渐变的歌词同步，以及唱片旋转动画。代码展示了如何通过DOM操作控制音频播放和歌词显示。

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

效果图展示

功能介绍

点击唱片播放和暂停音乐
背景为动态渐变
歌词与音乐同步

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器二代</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <div id="photo">
        <div class="musicimg"></div>
        <div class="songtitle">再努力一点点</div>
        <div class="singer">贺一航</div>
        <!-- 歌词区域 -->
        <div class="lrc">
            <div class="content"></div>
        </div>
        <audio src="./music/贺一航再努力一点点.mp3" id="music"></audio>
    </div>
    <textarea id="text" style="display: none;">//最后隐藏掉文本域
    
        [00:02.07]作词：徐杰
        [00:03.03]作曲：于子将
        [00:04.04]编曲：艾宇
        [00:04.85]缩混：周晓明
        [00:05.51]音乐总监：郭南生
        [00:05.91]制作人：杨学涛
        [00:07.23]发行：广州新月演艺经纪有限公司
        [00:30.88]可否也在感叹
        [00:34.44]脚下的路是举步维艰
        [00:38.55]让你意乱心烦
        [00:42.35]想要放弃却怀有不甘
        [00:47.07]其实没那么难
        [00:49.75]黎明之前总会有黑暗
        [00:53.60]试着咬紧牙关
        [00:57.75]鼓足勇气把梦大声喊
        [01:01.34]再努力一点点
        [01:05.47]或许能让你得偿所愿
        [01:09.06]人生苦短寥寥几十年
        [01:13.06]留下缺憾用什么填满
        [01:17.06]再坚持一点点
        [01:21.10]或许就伸手够到了天
        [01:24.74]只要有心何时都不晚
        [01:28.54]等到巅峰你会庆幸
        [01:31.97]今天的改变
        [01:48.27]可否也在感叹
        [01:51.77]脚下的路是举步维艰
        [01:55.61]让你意乱心烦
        [01:59.78]想要放弃却怀有不甘
        [02:04.56]其实没那么难
        [02:07.34]黎明之前总会有黑暗
        [02:10.99]试着咬紧牙关
        [02:15.25]鼓足勇气把梦大声喊
        [02:19.20]再努力一点点
        [02:22.68]或许能让你得偿所愿
        [02:26.43]人生苦短寥寥几十年
        [02:30.37]留下缺憾用什么填满
        [02:34.47]再坚持一点点
        [02:38.42]或许就伸手够到了天
        [02:42.16]只要有心何时都不晚
        [02:45.95]等到巅峰你会庆幸
        [02:49.39]今天的改变
        [03:05.69]再努力一点点
        [03:09.34]或许能让你得偿所愿
        [03:13.33]人生苦短寥寥几十年
        [03:16.92]留下缺憾用什么填满
        [03:21.07]再坚持一点点
        [03:24.71]或许就伸手够到了天
        [03:28.65]只要有心何时都不晚
        [03:32.39]等到巅峰你会庆幸
        [03:35.79]今天的改变
      </textarea>
      <script type="text/javascript">
        var oPlay = document.getElementsByClassName("musicimg")[0];
        // var oPlay 定义变量oPlay，在document文档下通过classname获得元素，类名可以相同，所以找第一个
        //得到第一个类名为musicimg的元素
        // getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
        // NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引
        // 号来访问列表中的节点(索引号由0开始)。
        var music = document.getElementById("music");
        //通过id来获取textarea标签内的词
        var text = document.getElementById("text");
        //通过id来获取textarea标签内的词
        var con = document.getElementsByClassName("content")[0];
        //定义content歌词标签内的内容
        var onoff = true;//初始化
        oPlay.onclick = function(){
            // 单击oPlay元素触发事件，播放音乐
            //即单击类musicimg中的光盘图标
            if(onoff){
                music.play();//play()是html5的新标签
                this.className = "musicimg rotate";
                //点击的时候oPlay元素的类名更改为musicimg和rotate
                //rotate是让唱片旋转动画
            }
            else{
                music.pause();//播放暂停
                this.className = "musicimg"
                //唱片停止旋转
            }
            onoff = !onoff;
            //状态切换 即播放后将onoff的值改为假，或暂停后将值改为真
        }



        //歌词放入到歌词div内
        //console.log(text.value)//可以现在控制台查看text的值
        var html = '';//保存歌词
        var lrc = text.value.split('[');
        //从[处开始切割,把所有的歌词切割成lrc一维数组
        console.log(lrc);
        for(var i = 0; i < lrc.length; i++){
            //循环歌词数组
            var lrcarr = lrc[i].split(']');
            //再将原来的数组中的元素切割成两部分，lrcarr[0]为时间，lrcarr[1]为歌词
            var time = lrcarr[0].split(".");
            //在秒与微秒间切割，time[0]就包含分钟和秒钟
            var times = time[0].split(":");
            //在分钟和秒钟之间再切割
            var ms = times[0] * 60 + times[1] * 1;
            //转换为秒数，times[1]必须乘以1，否则是字符串格式
            if (lrcarr[1]) {
                html += "<p id=" + ms + ">" + lrcarr[1] + "</p>"
                //用p标签来拼接歌词,p标签里把ms拼接进去 <p id="ms">lrcarr[1]</p>
                }
            con.innerHTML = html;//将歌词赋值给con的标签内容
        }



        //歌词与音乐同步
        var ap = document.getElementsByTagName("p");
        //获取p标签元素
        var num = 0;
        //监听音乐播放进度，进度变化触发函数
        music.addEventListener("timeupdate",function(){
            
            var currtime = parseInt(this.currentTime);
            //对当前播放时间取整
            //如果时间秒数存在更改p标签格式
            if(document.getElementById(currtime)){
                for(var i = 0; i < ap.length; i++){
                    ap[i].style.cssText = "color:#fff;font-size:20px";
                    //p标签原格式
                }
                document.getElementById(currtime).style.cssText = "color:#fffd80;font-size:25px";

                if (ap[4 + num].id == currtime) {//p标签的第四条之后的id等于当前时间歌词div层就往上走20px
                    con.style.top = -40 * num + "px";
                    num++;
                }
            }
        })

      </script>
</body>
</html>

css样式

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    overflow: hidden;
    /* background-size: 1850px; */
    background: linear-gradient(125deg,#000000,#3060c6,#5d6ede,#d2adff,#ff8080,#ef4646);
    background-size: 500%;
    animation: bgAnimation 15s linear infinite;
    /* 动画名 时长 线性的 无限次循环 */
    font-family: "KaiTi",楷体;
}

/* 渐变动画 */
@keyframes bgAnimation{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

#photo{
    width: 500px;
    height: 910px;
    background-image: url(../images/1.jpg);
    background-size: cover;
    /* 保持原有尺寸 */
    text-align: center;
    /* 垂直居中 */
    margin: 20px auto;
    border-radius: 30px;
    padding: 20px 0px;
}

.musicimg{
    background: url(../images/music.png) no-repeat center;
    width: 210px;
    height: 210px;
    margin: auto;
    background-size: 100%;
    /* 背景图片尺寸*/
    border-radius: 50%;
    /* 为圆形 */
}

/* 设置唱片旋转 */
.rotate{
    animation: rot 10s linear infinite;
    /* 自定义动画 名称 时间 匀速 无限重复 */
}

@keyframes rot{
    0% {
      transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
      }
    100% {
      transform: rotate(360deg);
    }
}

/* 歌曲标题 */
.songtitle{
    /* border: 1px solid #fff; */
    width: 320px;
    height: 40px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin: auto;
}

/* 歌手名字格式 */
.singer{
    /* border: 1px solid #fff; */
    width: 320px;
    height: 35px;
    text-align: center;
    font-family: "宋体";
    font-size: 20px;
    color: #fff;
    margin: auto;
}



.lrc {
  width: 350px;
  height: 560px;
  /* border: 1px solid rgb(255, 255, 255); */
  margin: auto;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  overflow: hidden;
}

.content {
  position: relative;
  left: 0;
  top: 0;
}

所需图片

图片来源于网络