音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

优质文章学习记录

05 Apr 2026 — 14 min read

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

项目概述
项目视图效果
一、侧边栏相关代码
- （一）HTML代码
- （二）css代码
二、登录页面
三、剩余代码以及所有源代码Gitee地址

项目概述

在当今数字化时代，音乐已然成为人们生活中不可或缺的一部分。本次带来的音乐播放器 HTML 项目，旨在打造一个具备基础且实用功能的音乐播放平台。通过 HTML、CSS 和 JavaScript 等前端技术的巧妙融合，实现一个界面美观、操作便捷的音乐播放器，满足用户在本地浏览音乐库、播放音乐等多样化需求。

提示！！！！

由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE
由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE
由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE

项目视图效果

下面列出一些我的项目代码
下面列出一些我的项目代码

一、侧边栏相关代码

（一）HTML代码

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的音乐</title><linkrel="stylesheet"href="侧边栏.css"></head><body><!-- 顶部导航栏 --><navclass="top-nav tech-style"><divclass="logo"><spanclass="logo-text"></span></div><ul><li><ahref="#">赞助商</a></li><li><ahref="#">BUG反馈</a></li><li><ahref="#">联系我们</a></li></ul></nav><!-- 侧边栏导航栏 --><divclass="shell"><ulclass="nav"><liclass="activeonly"id="logo"><ahref="../html.css.java部分/音乐主页.html"><divclass="text">目录</div></a></li><li><ahref="../html.css.java部分/音乐主页.html"><divclass="icon"><iclass="iconfont icon-cangku"></i></div><divclass="text">播放器主页</div></a></li><li><ahref="../html.css.java部分/音乐库.html"><divclass="icon"><iclass="iconfont icon-cangku"></i></div><divclass="text">音乐库</div></a></li><li><ahref="../html.css.java部分/分类音乐类型.html"><divclass="icon"><iclass="iconfont icon-cangku"></i></div><divclass="text">音乐分类</div></a></li><li><ahref="../html.css.java部分/歌手分类.html"><divclass="icon"><iclass="iconfont icon-zhuti_tiaosepan"></i></div><divclass="text">歌手分类</div></a></li><li><ahref="../html.css.java部分/我的主页.html"><divclass="icon"><iclass="iconfont icon-dunpaibaoxianrenzheng"></i></div><divclass="text">我的主页</div></a></li><li><ahref="../html.css.java部分/我的收藏.html"><divclass="icon"><iclass="iconfont icon-dunpaibaoxianrenzheng"></i></div><divclass="text">我的收藏</div></a></li><li><ahref="./我的主页.html"><divclass="icon"><iclass="iconfont icon-cangku"></i></div><divclass="text">系统设置</div></a></li><li><ahref="./成为创作者.html"><divclass="icon"><iclass="iconfont icon-dunpaibaoxianrenzheng"></i></div><divclass="text">成为创作者</div></a></li><li><ahref="./vip区域.html"><divclass="icon"><iclass="iconfont icon-dunpaibaoxianrenzheng"></i></div><divclass="text">超级会员VIP</div></a></li></ul></div><script>// 1. 获取所有类名为.nav下的 <li> 元素let nav = document.querySelectorAll(".nav li");functionactiveLink(){ nav.forEach((item)=> item.classList.remove("active"));this.classList.add("active");// 4. 隐藏所有非 "directory-content" 的 <section> 元素 document.querySelectorAll('section[id!="directory-content"]').forEach((section)=>{ section.style.display ='none';});// 5. 判断当前点击的 <li> 元素 idif(this.id ==='logo'){// 如果是 'logo'，显示 "directory-content" 元素 document.getElementById('directory-content').style.display ='block';}else{// 否则，显示和当前点击 <li> 元素 id 对应的元素 document.getElementById(this.id).style.display ='block';}}</script></body></html>

（二）css代码

/* 全局样式重置，去除默认边距、内边距，设置盒模型及去掉列表和链接默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } /* 页面主体样式，设置背景及顶部预留空间 */ body { background: rgba(228, 233, 245, 0); padding-top: 60px; } /* 科技感顶部导航栏整体样式，包含背景、颜色、布局、定位等 */ nav.top-nav.tech-style { background-color: #000; color: #ccc; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; } /* 导航栏渐变背景伪元素，增加层次感 */ nav.top-nav.tech-style:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #000000, #000000); opacity: 0.2; z-index: 0; } /* 导航栏logo样式，设置对齐和字体 */ nav.top-nav.tech-style.logo { display: flex; align-items: center; font-size: 22px; font-weight: bold; } /* 导航栏列表样式，去除默认样式并设为弹性布局 */ nav.top-nav.tech-style ul { list-style-type: none; display: flex; } /* 导航栏列表项样式，设置左边距间隔 */ nav.top-nav.tech-style ul li { margin-left: 25px; } /* 导航栏链接样式，设置颜色、内边距、过渡效果等 */ nav.top-nav.tech-style ul li a { color: #ccc; text-decoration: none; padding: 6px 12px; border-radius: 5px; transition: color 0.3s ease, background-color 0.3s ease; position: relative; } /* 导航栏链接底部横线伪元素，初始宽度为0，用于悬停效果 */ nav.top-nav.tech-style ul li a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #00f2ff; transition: width 0.3s ease; } /* 导航栏链接悬停时文字变色 */ nav.top-nav.tech-style ul li a:hover { color: #00f2ff; } /* 导航栏链接悬停时底部横线展开 */ nav.top-nav.tech-style ul li a:hover:before { width: 100%; } /* 侧边栏整体样式，固定定位、设置宽度、背景等及过渡效果 */ .shell { position: fixed; width: 40px; height: 100%; background: #000000; z-index: 9999; transition: width 0.5s; padding-left: 3px; overflow: hidden; margin-top: -10px; } /* 侧边栏悬停变宽 */ .shell:hover { width: 150px; } /* 侧边栏列表样式，相对定位及设置高度 */ .shell ul { position: relative; height: 100vh; } /* 侧边栏列表项样式，相对定位及内边距 */ .shell ul li { position: relative; padding: 3px; } /* 侧边栏激活项样式，设置背景和圆角 */ .activeonly { background: #e4e9f5; border-top-left-radius: 30px; border-bottom-left-radius: 30px; } /* 侧边栏激活项右上角伪元素，用于视觉效果 */ .activeonly::before { content: ""; position: absolute; top: -20px; right: 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: 3px 3px 0 3px #e4e9f5; background: transparent; } /* 侧边栏激活项右下角伪元素，用于视觉效果 */ .activeonly::after { content: ""; position: absolute; bottom: -20px; right: 0; width: 20px; height: 20px; border-top-right-radius: 15px; box-shadow: 3px -3px 0 3px #e4e9f5; background: transparent; } /* 侧边栏中id为logo元素的样式，设置外边距 */ #logo { margin: 30px 0 70px 0; } /* 侧边栏列表项链接整体样式，相对定位及布局设置 */ .shell ul li a { position: relative; display: flex; white-space: nowrap; } /* 侧边栏图标样式，设置尺寸、颜色、对齐等 */ .icon { min-width: 30px; padding-left: 3px; height: 35px; color: #fff; display: flex; justify-content: center; align-items: center; transition: 0.5s; } /* 图标内字体图标大小 */ .icon i { font-size: 15px; } /* 侧边栏文字样式，设置尺寸、颜色、对齐等 */ .text { height: 35px; display: flex; align-items: center; font-size: 12px; color: #ffad32c1; padding-left: 8px; text-transform: uppercase; letter-spacing: 1.5px; transition: 0.5s; } /* 侧边栏列表项悬停时图标和文字变色 */ .shell ul li:hover a.icon, .shell ul li:hover a.text { color: #ffa117; } /* 侧边栏激活项图标伪元素，用于装饰效果 */ .activeonly a.icon::before { content: ""; position: absolute; inset: 3px; width: 40px; background: #000000; border-radius: 50%; transition: 0.5s; border: 5px solid #ffa117; box-sizing: border-box; }

效果图

二、登录页面

（一）HTML代码

<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>注册登录界面</title><linkrel="stylesheet"href="注册登录页面.css"></head><body><divclass="container"><divclass="form-box"><!-- 注册 --><divclass="register-box hidden"><h1>注册</h1><inputtype="text"placeholder="用户名"id="register-username"><inputtype="email"placeholder="邮箱"id="register-email"><inputtype="password"placeholder="密码"id="register-password"><inputtype="password"placeholder="确认密码"id="register-password-confirm"><buttononclick="registerSubmit()">注册</button></div><!-- 登录 --><divclass="login-box"><h1>登录</h1><inputtype="text"placeholder="用户名"id="login-username"><inputtype="password"placeholder="密码"id="login-password"><buttononclick="loginSubmit()">登录</button></div></div><divclass="con-box left"><h2>欢迎来到<span>我的音乐</span></h2><imgsrc="图片/OIP-C.jpg"alt=""><p>已有账号</p><buttonid="login">去登录</button></div><divclass="con-box right"><h2>欢迎来到<span>我的音乐</span></h2><imgsrc="图片/01c2445861085ea8012060c8b394f2.jpg"alt=""><p>没有账号？</p><buttonid="register">去注册</button></div></div><scriptsrc="注册登录页面.js"></script></body></html>

（二）css代码

*{/* 初始化 */margin: 0;padding: 0;}body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background:linear-gradient(200deg, #328bff, #00ffd0);}.container{background-color: #fff;width: 650px;height: 415px;border-radius: 5px;/* 阴影 */box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);/* 相对定位 */position: relative;}.form-box{/* 绝对定位 */position: absolute;top: -10%;left: 5%;background-color: #d3b7d8;width: 320px;height: 500px;border-radius: 5px;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;z-index: 2;/* 动画过渡 加速后减速 */transition: 0.5s ease-in-out;}.register-box, .login-box{/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 100%;}.hidden{display: none;transition: 0.5s;}h1{text-align: center;margin-bottom: 25px;/* 大写 */text-transform: uppercase;color: #fff;/* 字间距 */letter-spacing: 5px;}input{background-color: transparent;width: 70%;color: #fff;border: none;/* 下边框样式 */border-bottom: 1px solid rgba(255, 255, 255, 0.4);padding: 10px 0;text-indent: 10px;margin: 8px 0;font-size: 14px;letter-spacing: 2px;}input::placeholder{color: #fff;}input:focus{color: #6e62ad;outline: none;border-bottom: 1px solid #6295ad;transition: 0.5s;}input:focus::placeholder{opacity: 0;}.form-box button{width: 70%;margin-top: 35px;background-color: #f6f6f6;outline: none;border-radius: 8px;padding: 13px;color: #62ad77;letter-spacing: 2px;border: none;cursor: pointer;}.form-box button:hover{background-color: #626dad;color: #f6f6f6;transition: background-color 0.5s ease;}/* 新增的加载动画样式 */.login-box.loading-animation{animation: loading 1s ease-in-out;}@keyframes loading{0%{opacity: 1;}50%{opacity: 0.5;}100%{opacity: 1;}}.con-box{width: 50%;/* 弹性布局 垂直排列 居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 绝对定位 居中 */position: absolute;top: 50%;transform:translateY(-50%);}.con-box.left{left: -2%;}.con-box.right{right: -2%;}.con-box h2{color: #8e9aaf;font-size: 25px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-bottom: 4px;}.con-box p{font-size: 12px;letter-spacing: 2px;color: #8e9aaf;text-align: center;}.con-box span{color: #427eff;}.con-box img{width: 150px;height: 150px;opacity: 0.9;margin: 40px 0;}.con-box button{margin-top: 3%;background-color: #fff;color: #a262ad;border: 1px solid #d3b7d8;padding: 6px 10px;border-radius: 5px;letter-spacing: 1px;outline: none;cursor: pointer;}.con-box button:hover{background-color: #b7c2d8;color: #ffffff;}

（三）js代码

// 获取相关DOM元素let login = document.getElementById('login');let register = document.getElementById('register');let form_box = document.getElementsByClassName('form-box')[0];let register_box = document.getElementsByClassName('register-box')[0];let login_box = document.getElementsByClassName('login-box')[0];let loginUsername = document.getElementById('login-username');let loginPassword = document.getElementById('login-password');let registerUsername = document.getElementById('register-username');let registerEmail = document.getElementById('register-email');let registerPassword = document.getElementById('register-password');let registerPasswordConfirm = document.getElementById('register-password-confirm');// 模拟用户数据存储（简单示例，实际应用中可替换为更合适的存储方式，如localStorage、发送到后端等）// 这里不再使用这个简单的数组存储，而是使用localStorage// 去注册按钮点击事件 register.addEventListener('click',()=>{ form_box.style.transform ='translateX(80%)'; login_box.classList.add('hidden'); register_box.classList.remove('hidden');});// 去登录按钮点击事件 login.addEventListener('click',()=>{ form_box.style.transform ='translateX(0%)'; register_box.classList.add('hidden'); login_box.classList.remove('hidden');});functionloginSubmit(){const inputUsername = loginUsername.value;const inputPassword = loginPassword.value;// 从localStorage获取存储的用户信息const storedUsers =JSON.parse(localStorage.getItem('users'))||[];const user = storedUsers.find(u=> u.username === inputUsername && u.password === inputPassword);if(user){// 给登录按钮所在的父容器添加加载动画类 document.querySelector('.login-box').classList.add('loading-animation');// 等待动画结束（这里简单设置一个定时器模拟动画时长，实际中可以根据动画的真实时长来调整）setTimeout(()=>{ window.location.href ='音乐主页.html';},500);// 假设动画时长为1秒，可根据实际调整}else{alert("用户名或密码错误，请重新输入");}}functionregisterSubmit(){const username = registerUsername.value;const email = registerEmail.value;const password = registerPassword.value;const passwordConfirm = registerPasswordConfirm.value;if(password === passwordConfirm){// 从localStorage获取已存储的用户信息列表，若不存在则初始化为空数组const storedUsers =JSON.parse(localStorage.getItem('users'))||[];// 创建新用户对象const newUser ={ username: username, email: email, password: password };// 将新用户添加到用户列表 storedUsers.push(newUser);// 将更新后的用户列表存储回localStorage localStorage.setItem('users',JSON.stringify(storedUsers));alert("注册完成");// 跳转到登录页面 form_box.style.transform ='translateX(0%)'; register_box.classList.add('hidden'); login_box.classList.remove('hidden');}else{alert("两次输入的密码不一致，请重新输入");}}

由于代码太多剩余的代码我将放到我的Gitee地址，需要的小伙伴们自取

由于项目代码量较多，本文仅展示了侧边栏和登录页面的相关代码。剩余部分包括音乐播放器的核心功能实现，如音乐的播放、暂停、切换、进度控制等功能的代码，以及音乐库展示、音乐分类筛选等相关代码。所有源代码已上传至 Gitee 仓库，感兴趣的小伙伴可以前往获取，进行学习和进一步的开发优化。希望这个项目能为大家在前端开发学习和实践中提供一些帮助和启发。