【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，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;
}

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