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

音乐播放器实现:html" title=前端>前端HTML，CSS，JavaScript综合大项目

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

项目概述

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

提示！！！！

由于项目代码太多，代码全部内容放置在我的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代码

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>javascript">// 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_165">（二）css代码

html">/* 全局样式重置，去除默认边距、内边距，设置盒模型及去掉列表和链接默认样式 */
* {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代码

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="javascript language-javascript">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="javascript language-javascript">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_444">（二）css代码

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代码

javascript">// 获取相关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 仓库，感兴趣的小伙伴可以前往获取，进行学习和进一步的开发优化。希望这个项目能为大家在html" title=前端>前端开发学习和实践中提供一些帮助和启发。
在这里插入图片描述