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

【前端】-音乐播放器(源代码和结构讲解,大家可以将自己喜欢的歌曲添加到数据当中,js实现页面动态显示音乐)

前言:音乐播放器是前端开发中的一个经典项目,通过它可以掌握很多核心技术,如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能,还能让开发者深入理解JavaScript与HTML的协同作用。

页面展示:

歌曲页面+列表(html代码):

录视频时音乐有点卡顿,大家看视频效果就行 

git链接:密码生成器: 用来生成密码的小项目

 下面有详细的注释讲解,大家可以对照着上图中的结构进行理解,当然也可以自己写,大家了解我的思路就行

  <div class="wrapper"><div class="player-warp"><!-- 歌曲信息卡片(隐藏页面) --><div class="player-info"><div class="info"><div class="name"><h4>我记得</h4></div><div class="singer-album">赵雷-署前街少年</div><div class="music-progress"><!-- 时间显示 --><div class="music-progress-top"><!-- 当前时间 --><span class="current-time">00:00</span><!-- 歌曲总时间 --><span class="time">05:29</span></div><!-- 音乐进度线 --><div class="music-progress-bar"><!-- 绘制播放线 --><div class="music-progress-line"></div></div></div></div></div><!-- 歌曲控制页面 --><div class="player-control"><div class="cover"><img src="" alt=""></div><!-- 控制按钮 --><div class="control"><i id="prevBtn" class="iconfont">&#xe844;</i><i id="playBtn" class="iconfont paused">&#xe848;</i><i id="nextBtn" class="iconfont">&#xe845;</i><i id="openModal" class="iconfont">&#xe8bf;</i></div></div></div></div><!-- 设置音乐背景页面 --><div class="bg"></div><!-- 绘制歌曲列表 --><div class="modal"><div class="modal-box"><!-- 设置模块头部内容 --><div class="modal-box-top"><div class="modal-title"><h3>音乐列表</h3></div><div class="modal-close"><!-- 放置让模块消失的图标 --><i class="iconfont">&#xe8b9;</i></div></div><div class="modal-wrapper"><!-- 容器 --><ul class="song-list"></ul></div></div></div><!-- 音乐--><audio src=""></audio><script src="./js/jquery.js"></script>

 页面功能介绍:

  • 点击播放按钮,音乐开始播放,歌曲信息将自然弹出,页面中的圆形图片开始旋转

  • 点击前进和后退按钮,音乐和页面信息将进行相应改变
  • 点击模块列表内容,可播放该音乐

js功能实现:

 家人们我是通过jQuery实现的

 1.使用ajax请求音乐数据

通过ajax请求数据,并且调用更新页面数据的函数,在页面中显示第一个歌曲, 添加音乐列表

    let musicList = [];let currentIndex = 0;  // 当前播放音乐的下标// Ajax 获取音乐数据$.ajax({type: "GET",url: "./music.json",success: function (data) {musicList = data;render(musicList[currentIndex]);  // 渲染当前音乐renderMusicList(musicList);       // 渲染音乐列表}});
 2.页面渲染信息函数:

 获得jQuery包装级对象包装级对象,并且通过text()方法,在对象中添加数据

    // 渲染音乐详情function render(data) {$(".name h4").text(data.name);$(".time").text(data.time);$(".singer-album").text(`${data.singer} - ${data.album}`);$(".cover img").attr("src", data.cover);$("audio").attr("src", data.audio_url);$('.bg').css({background: `url("${data.cover}") no-repeat center center`,"background-size": "cover"});}
3.播放和暂停音乐:

 设置点击播放按钮,将暂停按钮变成播放按钮,并且显示歌曲信息,大家可以通过上面视频了解

// 绑定播放按钮事件$("#playBtn").on("click", togglePlay);    // 播放与暂停音乐function togglePlay() {//返回dom对象let audio = $("audio").get(0);if (audio.paused) {$("#playBtn").removeClass("paused").addClass("running").html('&#xe847;');$(".player-info").animate({ top: '-95%' }, 'slow');$(".cover").css({ "animation-play-state": "running" });audio.play();} else {$("#playBtn").removeClass("running").addClass("paused").html('&#xe848;');$(".player-info").animate({ top: '0%' }, 'slow');$(".cover").css({ "animation-play-state": "paused" });audio.pause();}}
4.渲染音乐列表:

通过js动态添加歌曲列表 

    // 渲染音乐列表function renderMusicList(list) {$(".song-list").empty();$.each(list, function (index, item) {let isPlaying = (index == currentIndex && !$("audio").get(0).paused);let $li = $(`<li id="${index}" class="${index == currentIndex ? 'playing' : ''}"><span>${index + 1}.${item.name} - ${item.singer}</span> <span class="iconfont">${isPlaying ? '&#xe784;' : '&#xe781;'}</span></li>`);$(".song-list").append($li);});}
5.更新播放函数:

这个方法会被重复利用,所以封装起来 ,更新当前音乐信息,更新列表

    // 更新并播放音乐function updateAndPlay() {render(musicList[currentIndex]);$("#playBtn").trigger("click");  renderMusicList(musicList);    }
6.上下按钮点击事件:

点击前进和后退按钮更换歌曲事件,通过currentIndex变化更换当前歌词(因为当前歌词是通过currentIndex下标进行控制的) 

    // 绑定上一首、下一首按钮事件$("#prevBtn").on("click", playPrev);// 播放上一首音乐function playPrev() {currentIndex = (currentIndex > 0) ? currentIndex - 1 : musicList.length - 1;updateAndPlay();}$("#nextBtn").on("click", playNext);// 播放下一首音乐function playNext() {currentIndex = (currentIndex < musicList.length - 1) ? currentIndex + 1 : 0;updateAndPlay();}
7.更新音乐条的进度:

根据当前音乐的时间,获得值的百分比赋值给进度表的宽度 

    // 格式化时间function formatTime(time) {let min = Math.floor(time / 60);let sec = Math.floor(time % 60);return `${min < 10 ? '0' : ''}${min}:${sec < 10 ? '0' : ''}${sec}`;}// 更新播放时间和进度条$("audio").on("timeupdate", function () {let audio = $("audio").get(0);let currentTime = audio.currentTime || 0;let duration = audio.duration || 0;$(".current-time").text(formatTime(currentTime));$(".time").text(formatTime(duration));let value = (currentTime / duration) * 100;$(".music-progress-line").css({ width: value + "%" });});
8.显示模块列表:

点击两个小图标点开音乐列表和关闭音乐列表 

    // 打开和关闭音乐列表弹窗$("#openModal").on("click", function () {$(".modal").css({ display: "block" });renderMusicList(musicList);  // 渲染音乐列表});$(".modal-close").on("click", function () {$(".modal").css({ display: "none" });});
9.点击音乐列表播放音乐事件:

 点击列表相应歌曲播放点击歌曲

 // 点击音乐列表播放对应歌曲$(".song-list").on("click", "li", function () {currentIndex = parseInt($(this).attr("id"));updateAndPlay();  // 播放选择的音乐});
10.音乐结束事件:

这个我设置的是 playNext ()  播放下一个歌曲,大家还可以自己进行其他操作

    // 监听音乐播放完毕的事件,自动播放下一首$("audio").on("ended", function () {playNext();});

源代码:

上面HTML代码和JavaScript代码都是完整的,大家可以直接取上面的

CSS:
* {margin: 0;padding: 0;
}body {user-select: none;background-color: #dadada;
}/* 动画 */
@keyframes circle {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.wrapper {width: 360px;height: 80px;margin: auto;margin-top: 200px;
}.player-warp {position: relative;
}.player-info {width: 90%;height: 100%;position: absolute;/* top: -95%; */top: 0;left: 5%;z-index: -1;background-color: rgba(255, 255, 255, 0.15);box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);backdrop-filter: blur(3.5px);border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.17);display: flex;justify-content: flex-end;
}.player-info .info {padding: 5px;width: 60%;font-size: 15px;
}/* 进度条%比 */
.info .music-progress {width: 100%;
}.music-progress .music-progress-top {display: flex;color: #ff668c;justify-content: space-between;
}/* 绘制歌曲进程背景 */
.music-progress .music-progress-bar {width: 100%;height: 3px;background-color: #b8b8b8;border-radius: 10px;margin-top: 3px;
}/* 绘制覆盖线 */
.music-progress .music-progress-line {width: 0%;height: 90%;background-color: #ff5a94;
}.player-warp .player-control {width: 360px;height: 80px;background-color: #ffffff;border-radius: 15px;display: flex;z-index: 10;
}.player-control .cover {position: relative;/* margin-left: 20px; */left: 30px;width: 104px;height: 100px;border-radius: 50px;background-color: #ffffff;margin-top: -60px;animation: circle 5s infinite linear;animation-play-state: paused;
}.player-control img {position: absolute;top: 5%;left: 5%;width: 90%;height: 90px;border-radius: 50%;
}.player-control .cover::before {content: "";display: inline-block;width: 15px;height: 15px;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;
}.player-control .control {margin-left: 20px;width: 70%;display: flex;align-items: center;justify-content: space-around;
}.player-control .control i {display: block;color: #b05757;font-size: 45px;margin-right: 6px;cursor: pointer;transition: all 0.4s;
}.control i:hover {color: #e2a3a3 !important;
}.bg {position: absolute;top: 0;left: 0;z-index: -2;width: 100%;height: 100%;background: url("http://p2.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg") no-repeat center center;transform: scale(2);/* 模糊 */filter: blur(50px);transition: all 1s;
}li {list-style: none;
}.modal {width: 100%;height: 100%;background-color: rgba(128, 128, 128, 0.25);/* 设置固定定位 */position: fixed;top: 0;right: 0;display: none;
}.modal .modal-box {width: 30%;height: 100%;background-color: #fff;position: absolute;top: 0;right: 0;padding: 5px;
}.modal-box .modal-close .iconfont {font-size: 23px;
}.modal-box .modal-box-top {width: 100%;height: 40px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 5px;
}.modal-box .modal-wrapper li {cursor: pointer;display: block;height: 30px;line-height: 30px;display: flex;justify-content: space-between;margin-bottom: 4px;background-color: rgba(230, 230, 230, 0.37);border-bottom: 1px solid rgb(83, 83, 83);
}.modal-box .modal-wrapper li span {display: block;font-size: 18px;
}.modal-box .modal-wrapper li .iconfont {font-size: 28px;
}.modal-box .modal-wrapper li .iconfont:hover {font-size: 30px;
}.playing span {color: #00ddc3;
}

到这里就讲完了,感谢大家的观看

相关文章:

【前端】-音乐播放器(源代码和结构讲解,大家可以将自己喜欢的歌曲添加到数据当中,js实现页面动态显示音乐)

前言&#xff1a;音乐播放器是前端开发中的一个经典项目&#xff0c;通过它可以掌握很多核心技术&#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能&#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示&#xff1…...

PawSQL性能巡检平台 (3) - 慢查询采集和优化

在数据库运维管理中&#xff0c;慢查询一直是影响系统性能的重要因素。本文将详细介绍PawSQL数据库性能巡检平台在慢查询管理和优化方面的功能特性&#xff0c;帮助数据库管理员更好地应对性能挑战。 一、PawSQL巡检平台慢查询管理概述 PawSQL平台提供了全面的慢查询管理功能&…...

在docker中对MySQL快速部署与初始数据

1.准备工作 将已经准备好的Dockerfile文件与数据库初始化脚本init.sql放到 /usr/local目录中。 Dockerfile文件内容&#xff1a; FROM mysql:5.7 WORKDIR /docker-entrypoint-initdb.d ADD init.sql . FROM 代表来自mysql5.7的镜像&#xff0c;作为基准镜像。 WORKDIR设置工…...

Mysql(MGR)和ProxySQL搭建部署-Kubernetes版本

一、Mysql(MGR) 1.1 statefulSet.yaml apiVersion: apps/v1 kind: StatefulSet metadata:labels:app: mysqlname: mysqlnamespace: yihuazt spec:replicas: 3serviceName: mysql-headlessselector:matchLabels:app: mysqltemplate:metadata:labels:app: mysqlspec:affinity:p…...

将现有Web 网页封装为macOS应用

文章目录 方式一&#xff1a;Unite for macOS方式二&#xff1a;Web2Desk方式三&#xff1a;Nativefier方式四&#xff1a;Flutter Flutter WebView Plugin总结 方式一&#xff1a;Unite for macOS Unite 是一款专为 macOS 设计的工具&#xff0c;可以将任意 Web 页面快速封装…...

药片(药丸)和胶囊识别数据集,使用yolo,pasical voc xml, coco json格式标注,可识别药片和胶囊两种标签,2445张原始图片

药片(药丸)和胶囊识别数据集&#xff0c;使用yolo&#xff0c;pasical voc xml, coco json格式标注&#xff0c;可识别药片和胶囊两种标签&#xff0c;2445张原始图片 数据集分割 训练组80&#xff05; 1967图片 有效集13% 317图片 测试集7% 161图片 预处…...

在Linux的世界中怎么玩转定时器任务

定时器使用 先是看到一段使用Linux Sevice服务的脚本&#xff0c;意外发现在ExecStart启动脚本中&#xff0c;它利用无限循环做定时任务的事情&#xff0c;非常突兀&#xff01; 觉得既然用得了Linux Service&#xff0c;那么&#xff0c;与之配套的cron定时器服务是否更应该…...

HTML——20 自定义属性

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>自定义属性</title></head><body><a href"https://ai.m.taobao.com" 自定义属性"属性值">淘宝网</a><a href"h…...

2025:OpenAI的“七十二变”?

朋友们&#xff0c;准备好迎接AI的狂欢了吗&#xff1f;&#x1f680; 是不是跟我一样&#xff0c;每天醒来的第一件事就是看看AI领域又有什么新动向&#xff1f; 尤其是那个名字如雷贯耳的 OpenAI&#xff0c;简直就是AI界的弄潮儿&#xff0c;一举一动都牵动着我们这些“AI发…...

mac docker部署jar包流程

mac docker部署jar包流程 默认服务器已经准备好了相关的准备工作&#xff0c;如&#xff1a;docker&#xff0c;docker内安装所需软件数据库&#xff0c;jdk等&#xff0c;将要部署等jar包。 1:将jar 包上传到服务器目录下&#xff1a;/usr/local/service (没有目录可以自己创建…...

【postgresql 物化视图】自动刷新物化视图2种方法

普通视图就是一个虚拟表&#xff0c;不占内存。而物化视图是存在的&#xff0c;占内存。 物化视图&#xff0c;默认是手动刷新。下面是手动刷新的例子。我们来创建一个物化视图。 create MATERIALIZED VIEW dnh_analasis_view as select cjsj,a,b,c,d from table_1; REFRESH …...

HMSC联合物种分布模型

联合物种分布模型&#xff08;Joint Species Distribution Modelling&#xff0c;JSDM&#xff09;在生态学领域&#xff0c;特别是群落生态学中发展最为迅速&#xff0c;Hmsc是物种群落分层模型的缩写(Hierarchical Modelling of Species Communities)&#xff0c;它是一种基于…...

stm32f103zet6 ds18b20

main.c // main.c #include "sys.h" #include "ds18b20.h"int main(void){ uart_init(9600);delay_init();while(DS18B20_Init()) //DS18B20初始化 {printf("error");delay_ms(200);}while(1){printf("%4.2f\r\n",Get_Temp());}}ds18…...

【前端,TypeScript】TypeScript速成(六):函数

函数 函数的定义 定义一个最简单的加法函数&#xff1a; function add(a: number, b: number): number {return a b }&#xff08;可以看到 JavaScript/TypeScript 的语法与 Golang 也非常的相似&#xff09; 调用该函数&#xff1a; console.log(add(2, 3)) // out [LOG…...

React引入Echart水球图

在搭建React项目时候&#xff0c;遇到了Echart官方文档中没有的水球图&#xff0c;此时该如何配置并将它显示到项目中呢&#xff1f; 目录 一、拓展网站 二、安装 三、React中引入 1、在components文件夹下新建一个组件 2、在组件中引入 3、使用水波球组件 一、拓展网站 …...

谷歌浏览器的智能推荐功能使用指南

谷歌浏览器作为全球最受欢迎的网络浏览器之一&#xff0c;以其强大的功能和简洁的界面深受用户喜爱。其中&#xff0c;智能推荐功能通过利用先进的算法和数据分析&#xff0c;为用户提供个性化的内容推荐&#xff0c;大大提升了上网体验。本文将详细介绍如何开启和使用谷歌浏览…...

GitHub 上排名前 11 的开源管理后台(Admin Dashboard)项目

如果你是一名开发者&#xff0c;经常处理数据或参与项目管理&#xff0c;那么这篇文章绝对值得收藏&#xff01;当你需要一个高效、易用的管理后台&#xff08;Admin Dashboard&#xff09;项目时&#xff0c;本文会给你灵感。 在现代企业管理和业务运营中&#xff0c;管理后台…...

【运维】部署MKDocs

部署MKDocs obsidian 记录笔记&#xff0c;通过 mkdocs 私有化部署。 1 使用MKDocs创建笔记 创建仓库&#xff0c;安装 Material for MkDocs 和 mkdocs-minify-plugin mkdir tmp cd tmp git initpip install mkdocs-material pip install mkdocs-minify-pluginmkdocs new .2 …...

C# 读取多种CAN报文文件转换成统一格式数据,工具类:CanMsgRead

因为经常有读取CAN报文trace文件的需求&#xff0c;而且因为CAN卡不同、记录软件不同会导致CAN报文trace文件的格式都有差异。为了方便自己后续开发&#xff0c;我写了一个CanMsgRead工具类&#xff0c;只要提供CAN报文路径和CAN报文格式的选项即可将文件迅速读取转换为统一的C…...

计算机网络 (8)物理层的传输方式

一、串行传输与并行传输 串行传输 定义&#xff1a;串行传输是一种数据传输方式&#xff0c;指的是逐位地按照顺序传输数据。在串行传输中&#xff0c;数据位逐个按照一定的顺序进行传输&#xff0c;可以通过单条线路或信道进行。特点&#xff1a; 逐位传输&#xff1a;串行传输…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...