当前位置：首页 > news >正文

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

news 2026/4/11 16:07:22

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

项目概述
项目视图效果
一、侧边栏相关代码
- （一）HTML代码
- （二）css代码
二、登录页面
- （一）HTML代码
- （二）css代码
- （三）js代码
三、剩余代码以及所有源代码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代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的音乐</title><link rel="stylesheet" href="侧边栏.css">
</head><body><!-- 顶部导航栏 --><nav class="top-nav tech-style"><div class="logo"><span class="logo-text"></span></div><ul><li><a href="#">赞助商</a></li><li><a href="#">BUG反馈</a></li><li><a href="#">联系我们</a></li></ul></nav>
<!-- 侧边栏导航栏 -->
<div class="shell"><ul class="nav"><li class="activeonly" id="logo"><a href="../html.css.java部分/音乐主页.html"><div class="text">目录</div></a></li><li><a href="../html.css.java部分/音乐主页.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">播放器主页</div></a></li><li><a href="../html.css.java部分/音乐库.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">音乐库</div></a></li><li><a href="../html.css.java部分/分类音乐类型.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">音乐分类</div></a></li><li><a href="../html.css.java部分/歌手分类.html"><div class="icon"><i class="iconfont icon-zhuti_tiaosepan"></i></div><div class="text">歌手分类</div></a></li><li><a href="../html.css.java部分/我的主页.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">我的主页</div></a></li><li><a href="../html.css.java部分/我的收藏.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">我的收藏</div></a></li><li><a href="./我的主页.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">系统设置</div></a></li><li><a href="./成为创作者.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">成为创作者</div></a></li><li><a href="./vip区域.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">超级会员VIP</div></a></li></ul>
</div><script>// 1. 获取所有类名为.nav下的 <li> 元素let nav = document.querySelectorAll(".nav li");function activeLink() {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代码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>注册登录界面</title><link rel="stylesheet" href="注册登录页面.css">
</head><body><div class="container"><div class="form-box"><!-- 注册 --><div class="register-box hidden"><h1>注册</h1><input type="text" placeholder="用户名" id="register-username"><input type="email" placeholder="邮箱" id="register-email"><input type="password" placeholder="密码" id="register-password"><input type="password" placeholder="确认密码" id="register-password-confirm"><button onclick="registerSubmit()">注册</button></div><!-- 登录 --><div class="login-box"><h1>登录</h1><input type="text" placeholder="用户名" id="login-username"><input type="password" placeholder="密码" id="login-password"><button onclick="loginSubmit()">登录</button></div></div><div class="con-box left"><h2>欢迎来到<span>我的音乐</span></h2><img src="图片/OIP-C.jpg" alt=""><p>已有账号</p><button id="login">去登录</button></div><div class="con-box right"><h2>欢迎来到<span>我的音乐</span></h2><img src="图片/01c2445861085ea8012060c8b394f2.jpg" alt=""><p>没有账号？</p><button id="register">去注册</button></div></div><script src="注册登录页面.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');
});function loginSubmit() {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("用户名或密码错误，请重新输入");}
}function registerSubmit() {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);// 将更新后的用户列表存储回localStoragelocalStorage.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 仓库，感兴趣的小伙伴可以前往获取，进行学习和进一步的开发优化。希望这个项目能为大家在前端开发学习和实践中提供一些帮助和启发。
在这里插入图片描述

三、剩余代码以及所有源代码Gitee地址

我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

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

项目概述

提示！！！！

项目视图效果

一、侧边栏相关代码

（一）HTML代码

（二）css代码

二、登录页面

（一）HTML代码

（二）css代码

（三）js代码

三、剩余代码以及所有源代码Gitee地址

相关文章：