使用 HTML、CSS 和 Javascript 构建音乐播放器
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
=====================================================
亲爱的读者，
不如从零开始，自己打造一个音乐播放器？是不是很激动人心？那就开始吧！
项目文件夹结构
- index.html - 包含 HTML 布局，定义了页面上显示的元素结构。
- images 文件夹 - 包含我们项目中使用的 .jpg 图像。
- 音乐文件夹 - 包含我们项目中使用的 .mp3 音频文件。
- style.css 文件包含用于设置样式的 CSS 代码。使用 CSS，我们可以设置不同部分的样式，使其更具视觉吸引力。
- script.js 文件包含 JavaScript 代码。其中包含多个协同工作的函数，用于处理播放器的所有功能，例如：播放、暂停、歌曲切换、播放歌曲时弹出歌曲标题和进度条、点击进度条跳转到歌曲的相应位置等等。
HTML布局
打开 VSCode，在index.html文件中创建基本的 HTML 结构（输入 ! 然后按 Tab 键）。将标题设置为“音乐播放器”。将style.css和script.js链接到创建的 HTML 文件，并链接 FontAwesome CSS 以使用播放、暂停、下一首和上一首图标。
基本索引.html
在主体内部，创建一个音频容器类，该类将包裹所有内容。
<div class =“audio-container" id =“audio-container">
在audio-container类中，创建一个audio-info类，用于保存歌曲标题和点击播放时的进度。
<div class=”audio-info”>
在audio-info类中添加id = 'title'的h4标签，它将通过 javascript 动态填充当前播放的歌曲。
<h4 id=”title”></h4>
创建进度容器类，并在其中添加一个进度类，该进度类将动态填充进度。
<div class=”audio-container” id=”audio-container”>
<div class=”audio-info”>
<h4 id=”title”></h4>
<div class=”progress-container” id=”progress-container”>
<div class=”progress” id=”progress”></div>
</div>
</div>
在audio-info类下方添加audio标签，并注明歌曲来源和 ID。
<audio src=”music/melody.mp3" id=”audio”></audio>
保存图像
<img src=”images/melody.jpg” alt=”music-cover” id=”cover”>
创建一个导航类，其中包含三个按钮，分别用于播放歌曲、播放上一首歌曲和播放下一首歌曲。
<div class=”navigation”>
<button id=”prev” class=”action-btn”>
<i class=”fas fa-backward”></i>
</button>
<button id=”play” class=”action-btn action-btn-big”>
<i class=”fas fa-play”></i>
<button id=”next” class=”action-btn”>
<i class=”fas fa-forward”></i>
</button>
index.html音乐播放器视图
CSS样式
这里需要编写相当多的 CSS 代码，我只解释了其中最重要的部分，其余的 CSS 代码主要涉及元素的定位、大小和颜色。我在文章末尾分享了 GitHub 链接，你可以在那里查看完整的代码。
在人物造型方面，我使用了黄色和橙色色调的线性渐变作为背景图像。
background-image: linear-gradient(0deg, rgba(251,252,13,1) 23.8%, rgba(255,170,1,0.99) 92%);
添加背景颜色为黑色，并为音频容器类添加了阴影，该阴影会包裹除 h1 标签之外的所有内容。
background-color: #000;
box-shadow: 0 20px 20px 0 rgb(247, 148, 1);
要使图像呈圆形，请将img-container中的border-radius设置为 50%。
border-radius: 50%;
设置img-container的动画，使圆形图像在歌曲播放时旋转。
animation: rotate 3s linear infinite;
创建从 0 度到 360 度的旋转关键帧
@keyframes rotate {
from {
transform: rotate(0deg);}
to {
transform: rotate(360deg);}
}
如果音频容器带有播放类，则图像会旋转
.audio-container.play .img-container img {
animation-play-state: running;
}
只有当音乐播放时，音频信息才会弹出。请参考以下 CSS 实现。
style.css
以下是进度条的 CSS 代码，用于显示歌曲的完成百分比。我使用白色作为背景色，黑色显示进度条。
style.css
JavaScript 逻辑
播放器的逻辑定义在 script.js 文件中。该文件包含多个协同工作的函数，用于处理播放器的所有功能，
包括定义所有变量和访问 HTML 元素。
需要动态更改的 HTML 布局元素首先使用 getElementById() 方法选中，然后赋值给变量名，以便后续访问和修改。
script.js
编写一个函数loadSong(song)来动态更新音频源和相应的图像源。调用该函数，通过传递songIndex值将歌曲详情加载到 DOM 中。我将songIndex 的值为 1，这意味着音乐播放器从列表中的第二首歌开始播放（索引从 0 开始）。
让我们创建事件监听器，监听特定事件（例如：点击）并执行特定操作。
事件监听器：点击播放按钮时，歌曲应该开始播放；如果歌曲已经在播放，则应该停止播放。实现playSong()函数和pauseSong()函数，并在函数中实现图标在播放图标和暂停图标之间的切换逻辑。
script.js
事件监听器监听点击“上一首”和“下一首”按钮：点击“上一首”按钮会调用`prevSong()`函数，该函数会播放列表中的上一首歌曲，因此我们会递减` songIndex` 的值。如果 ` songIndex` 的值小于 0，则我们会将其设置为指向列表中的最后一首歌曲，这样歌曲就会循环播放。类似地，点击“下一首”按钮会调用`nextSong()`函数，该函数会播放列表中的下一首歌曲，因此我们会递增`songIndex` 的值。如果`songIndex` 的值大于或等于列表中的歌曲数量，则我们会将其设置为0。
script.js
用于更新歌曲进度的事件监听器： HTML 音频标签有一个名为timeupdate 的事件。歌曲持续播放时，该事件会被触发，我们在该事件中调用updateProgress()函数。在updateProgress()函数中，我们会从事件中获取歌曲的持续时间和当前时间。使用公式(当前时间 / 持续时间) * 100计算进度百分比，并将该进度百分比值设置为进度条的宽度。
script.js
进度条点击事件监听器：当用户点击进度条上的任意位置时，我们会调用`setProgress()`函数，从而跳转到歌曲的相应位置。该函数会根据用户点击进度条的位置来调整歌曲进度，首先获取 X 轴偏移值以确定用户点击的位置，然后使用公式(clickX / width) * duration 计算当前时间。这样，我们就可以在歌曲中跳转到任意位置。
style.css
用于检测歌曲结束的事件监听器： HTML 音频 API 提供了一个名为ended 的事件。当歌曲结束时，我们将调用之前创建的nextSong()函数。
audio.addEventListener(‘ended’, nextSong);
瞧！音乐播放器已准备好进行演示。
最终演示
https://www.youtube.com/watch?v=Xyss5NABwOc
完整的源代码可以在 GitHub 仓库中找到，链接在此。
请访问https://javascript30.com/查看更多此类项目
感谢您的关注。
- Divya MCM