【前端】-音乐播放器（源代码和结构讲解，大家可以将自己喜欢的歌曲添加到数据当中，js实现页面动态显示音乐）
前言：音乐播放器是前端开发中的一个经典项目，通过它可以掌握很多核心技术，如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能，还能让开发者深入理解JavaScript与HTML的协同作用。
页面展示：
歌曲页面+列表(html代码):
录视频时音乐有点卡顿，大家看视频效果就行
git链接：密码生成器: 用来生成密码的小项目
下面有详细的注释讲解，大家可以对照着上图中的结构进行理解，当然也可以自己写，大家了解我的思路就行
<div> <div> <!-- 歌曲信息卡片（隐藏页面） --> <div> <div> <div> <h4>我记得</h4> </div> <div>赵雷-署前街少年</div> <div> <!-- 时间显示 --> <div> <!-- 当前时间 --> <span>00:00</span> <!-- 歌曲总时间 --> <span>05:29</span> </div> <!-- 音乐进度线 --> <div> <!-- 绘制播放线 --> <div></div> </div> </div> </div> </div> <!-- 歌曲控制页面 --> <div> <div> <img> </div> <!-- 控制按钮 --> <div> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </div> <!-- 设置音乐背景页面 --> <div></div> <!-- 绘制歌曲列表 --> <div> <div> <!-- 设置模块头部内容 --> <div> <div> <h3>音乐列表</h3> </div> <div> <!-- 放置让模块消失的图标 --> <i></i> </div> </div> <div> <!-- 容器 --> <ul> </ul> </div> </div> </div> <!-- 音乐--> <audio></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(''); $(".player-info").animate({ top: '-95%' }, 'slow'); $(".cover").css({ "animation-play-state": "running" }); audio.play(); } else { $("#playBtn").removeClass("running").addClass("paused").html(''); $(".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 = $(` <liplaying' : ''}"> <span>${index + 1}.${item.name} - ${item.singer}</span> <span>${isPlaying ? '' : ''}</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; }到这里就讲完了，感谢大家的观看
