如何使用纯 HTML、CSS、JS 视频教程代码文章创建音乐播放器，您可能会觉得有用

2025-05-28

如何使用纯 HTML、CSS、JS 创建音乐播放器

视频教程

代码

您可能觉得有用的文章

大家好，今天我们将学习如何仅使用 HTML、CSS 和 JS 轻松创建音乐播放器，无需其他库。我们的音乐播放器拥有现代风格的设计，并带有炫酷的动画效果，例如播放/暂停动画、磁盘旋转动画和脉冲动画。我们的音乐播放器具有可正常播放的快进/快退按钮以及可快速切换歌曲的滑块。

如果您想观看演示或完整的编码教程视频以更好地理解，您可以观看下面的教程。

视频教程

如果您能订阅我的 YouTube 频道来支持我，我将不胜感激。

代码

在我们开始编写代码之前。虽然它不是一个 Nodejs 应用程序，但我们至少应该了解它的文件夹结构。

第 11 帧

那么，现在让我们开始设计我们的音乐播放器。

首先，当然是在index.html文件里写基本的 HTML 模板，并链接style.css到app.js它。然后创建一个音乐播放器容器。

<div class="music-player">
</div>
Enter fullscreen mode Exit fullscreen mode 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #5f7a61;
    font-family: 'roboto', sans-serif;
}

.music-player{
    width: 350px;
    height: 550px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 100px rgba(255, 255, 255, 0.1);
    padding: 30px;
    overflow: hidden;
    color: #d5eebb;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获
现在创建歌曲名称、艺术家姓名。

<!-- Inside music player element -->
<h1 class="music-name">song one</h1>
<p class="artist-name">artist</p>
Enter fullscreen mode Exit fullscreen mode

当然还要设计它们。

.music-name,
.artist-name{
    text-align: center;
    text-transform: capitalize;
}

.music-name{
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 10px;
}

.artist-name{
    font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

这里“，” (逗号) 用于为多个元素赋予相同的样式。

输出

捕获2

太棒了！现在制作歌曲的光盘/封面图片。我们只使用一个div，并设置background-image歌曲封面图片。

<div class="disk"></div>
Enter fullscreen mode Exit fullscreen mode

记住我们在容器内添加的所有元素music player。

.disk{
    position: relative;
    display: block;
    margin: 40px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-image: url('images/cover\ 1.png');
    background-size: cover;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08);
}
Enter fullscreen mode Exit fullscreen mode

在这里，我使用它box-shadow来为磁盘创建外圆。

输出

捕获3

但是，我们如何在中心打洞呢？为此，我们将使用伪元素。您可以在这里::before找到更多信息。

.disk::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #5f7a61;
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture4

嗯！看起来不错。现在，当然是给音乐播放器做个搜索栏了。

<div class="song-slider">
    <input type="range" value="0" class="seek-bar">
</div>
Enter fullscreen mode Exit fullscreen mode 
.song-slider{
    width: 100%;
    position: relative;
}

.seek-bar{
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 10px;
    background: #7fc8a9;
    overflow: hidden;
    cursor: pointer;
}

.seek-bar::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 1px;
    height: 20px;
    box-shadow: -400px 0 0 400px #d5eebb;
}
Enter fullscreen mode Exit fullscreen mode
  1. -webkit-appearance：用于隐藏浏览器对该元素的所有默认样式。
  2. -webkit-slider-thumb：这将选择我们拖动的滑块的拇指或头部。
输出

Capture5

现在制作音乐当前时间和持续时间元素。

<div class="song-slider">
    <input type="range" value="0" class="seek-bar">
    <span class="current-time">00:00</span>
    <span class="song-duration">00:00</span>
</div>
Enter fullscreen mode Exit fullscreen mode 
.current-time,
.song-duration{
    font-size: 14px;
}

.song-duration{
    position: absolute;
    right: 0;
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture6

现在，开始制作控件。我们将用 CSS 制作播放按钮图标，并用图片制作前进/后退按钮。

<div class="controls">
    <button class="play-btn">
        <span></span>
        <span></span>
    </button>
</div>
Enter fullscreen mode Exit fullscreen mode 
.controls{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    margin-top: 20px;
}

.play-btn{
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d5eebb;
    cursor: pointer;
    border: none;
}

.play-btn span{
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    width: 10px;
    height: 30px;
    border-radius: 2px;
    background: #5f7a61;
    transition: .5s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.play-btn span:nth-child(2){
    left: 55%;
    transform-origin: center;
}
Enter fullscreen mode Exit fullscreen mode

如果你注意到这里，在span选择器中，我设置了 default clip-path，这是因为我希望在使用 clip-path 时实现平滑过渡，因此我也需要定义一个 default 值。而 clip-path 的值只是一个矩形。

输出

Capture7

现在我想把这个暂停的logo改成播放的logo。为此，我将使用一个额外的类pause。

.play-btn.pause span:nth-child(2){
    transform: translateY(-50%) scaleY(0);
}

.play-btn.pause span:nth-child(1){
    width: 35%;
    left: 53%;
    transform: translate(-50%, -50%);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
}
Enter fullscreen mode Exit fullscreen mode

  1. 当你遇到类似这样的情况.class.class，.class#id或者#id.class有多个不带空格的选择器时，这意味着你在同时选择具有两个类/ID的元素。

  2. 在上面的 CSS 中，当播放图标带有pauseclass 时，我们将其第二个 span 缩小到 0，使其完全消失。并使用 clip-path 将第一个 span 制作成三角形。

输出

无标题设计

从 chrome 检查器切换play-btn元素的类时输出。pause

现在制作脉冲动画并将其添加到上课play-btn时pause。

.play-btn.pause{
    animation: pulse 2s linear infinite;
}

@keyframes pulse{
    0%{
        box-shadow: 0;
    }
    50%{
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
    }
    100%{
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
    }
}
Enter fullscreen mode Exit fullscreen mode

pause将类添加到play-btn元素中作为默认类。太棒了！现在来制作前进/后退按钮。

<div class="controls">
    <button class="btn backward-btn"><img src="images/pre.png" alt=""></button>
    <button class="play-btn pause">
        <span></span>
        <span></span>
    </button>
    <button class="btn forward-btn"><img src="images/nxt.png" alt=""></button>
</div>
Enter fullscreen mode Exit fullscreen mode 
.btn{
    width: 40px;
    height: 40px;
    background: #d5eebb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture8

现在我们想要的最后一个动画是磁盘旋转。为此制作一个动画。

@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

但是如何实现这个动画呢？给.disk元素设置默认动画。但是将其设置animation-play-state为“暂停”。animation-play-state用于设置动画状态。在本例中，我们希望动画在开始时暂停。

running当disk元素具有类时，将状态更改为play。

.disk{
    // previous styles
    animation: rotate 20s linear infinite;
    animation-play-state: paused;
}

.disk.play{
    animation-play-state: running;
}
Enter fullscreen mode Exit fullscreen mode

播放器的设计已经完成。现在，让我们让播放器运行起来。

在编写 JS 之前，请确保您已完成这些事情。

  1. 创建音频源。我们当然需要一个音频源来播放音乐。为此，只需在一开始创建一个空的音频元素，并为其指定一个 id，以便我们在 JS 中访问它。
<audio src="" id="audio"></audio>
Enter fullscreen mode Exit fullscreen mode
  1. 第二件事是，确保data.js之前添加了文件app.js，因为我们的数据已经在里面，但只有之前导入data.js后才能访问它。app.jsapp.js

现在我们可以编写 JS 了。

初始化一个变量来存储当前音乐索引。将其默认值设置为 0。

let currentMusic = 0;
Enter fullscreen mode Exit fullscreen mode

现在选择我们需要添加一些行为的每个元素。

const music = document.querySelector('#audio');

const seekBar = document.querySelector('.seek-bar');
const songName = document.querySelector('.music-name');
const artistName = document.querySelector('.artist-name');
const disk = document.querySelector('.disk');
const currentTime = document.querySelector('.current-time');
const musicDuration = document.querySelector('.song-duration');
const playBtn = document.querySelector('.play-btn');
const forwardBtn = document.querySelector('.forward-btn');
const backwardBtn = document.querySelector('.backward-btn');
Enter fullscreen mode Exit fullscreen mode

完成所有元素的选择后，创建一个设置音乐的功能。

// setup music

const setMusic = (i) => {
    seekBar.value = 0; // set range slide value to 0;
    let song = songs[i];
    currentMusic = i;
    music.src = song.path;

    songName.innerHTML = song.name;
    artistName.innerHTML = song.artist;
    disk.style.backgroundImage = `url('${song.cover}')`;

    currentTime.innerHTML = '00:00';
    setTimeout(() => {
        seekBar.max = music.duration;
        musicDuration.innerHTML = formatTime(music.duration);
    }, 300);
}
Enter fullscreen mode Exit fullscreen mode

现在，我们正在设置歌曲。这里要注意的是，

  1. setTimeout- 我使用这个是因为设置音乐和访问音乐时存在轻微的时间差，导致访问音乐时长时出现错误。
  2. formatTime- 这是我们接下来要创建的函数。该函数将以时间作为参数，并返回格式化的值。例如，如果我们传入 - ，formatTime(120)它将返回02:00。

不要忘记setMusic以0参数形式调用一次。

setMusic(0);
Enter fullscreen mode Exit fullscreen mode

创建格式化时间函数。

// formatting time in min and seconds format

const formatTime = (time) => {
    let min = Math.floor(time / 60);
    if(min < 10){
        min = `0${min}`;
    }
    let sec = Math.floor(time % 60);
    if(sec < 10){
        sec = `0${sec}`;
    }
    return `${min} : ${sec}`;
}
Enter fullscreen mode Exit fullscreen mode

现在我们可以为播放按钮添加点击事件。

playBtn.addEventListener('click', () => {
    if(playBtn.className.includes('pause')){
        music.play();
    } else{
        music.pause();
    }
    playBtn.classList.toggle('pause');
    disk.classList.toggle('play');
})
Enter fullscreen mode Exit fullscreen mode

element.className返回其类和includes方法，用于查找特定字符串是否在文本内。

现在每 500 毫秒让搜索栏更新到歌曲的当前时间。

// seek bar
setInterval(() => {
    seekBar.value = music.currentTime;
    currentTime.innerHTML = formatTime(music.currentTime);
}, 500)
Enter fullscreen mode Exit fullscreen mode

这将每 500 毫秒更新一次搜索栏。
现在，我们还想在歌曲播放时间之间跳转。为此，请将change事件添加到搜索栏。

seekBar.addEventListener('change', () => {
    music.currentTime = seekBar.value;
})
Enter fullscreen mode Exit fullscreen mode

我们快完成了。现在创建前进/后退点击事件。

// forward and backward button
forwardBtn.addEventListener('click', () => {
    if(currentMusic >= songs.length - 1){
        currentMusic = 0;
    } else{
        currentMusic++;
    }
    setMusic(currentMusic);
    playMusic();
})

backwardBtn.addEventListener('click', () => {
    if(currentMusic <= 0){
        currentMusic = songs.length - 1;
    } else{
        currentMusic--;
    }
    setMusic(currentMusic);
    playMusic();
})
Enter fullscreen mode Exit fullscreen mode

是的，如果你看到我们有playMusic函数的话。它存在的目的是每次播放音乐。

const playMusic = () => {
    music.play();
    playBtn.classList.remove('pause');
    disk.classList.add('play');
}
Enter fullscreen mode Exit fullscreen mode

最后，当当前歌曲结束时，让歌曲快进。在500ms间隔内编写代码。

setInterval(() => {
    seekBar.value = music.currentTime;
    currentTime.innerHTML = formatTime(music.currentTime);
    if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){
        forwardBtn.click();
    }
}, 500)
Enter fullscreen mode Exit fullscreen mode

就这样！干得好！我们的音乐播放器终于完成了。希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区留言。

您可能觉得有用的文章

  1. 最佳 CSS 效果
  2. 无限 CSS 加载器
  3. Disney+ 克隆版
  4. Youtube API - Youtube 克隆
  5. TMDB - Netflix 克隆

如果您能订阅我的YouTube频道，我将不胜感激。我创作了非常棒的网络内容。

下载资产、源代码，在 Paypal 上捐赠给我

您可能不想错过我接下来即将推出的教程。

  1. 功能齐全的电子商务网站 - Fullstack
  2. 响应式个人投资组合
  3. 具有下载功能的名片设计器。

您的捐赠真的激励我创作更多类似的精彩教程。请在Patreon上支持我，请我喝杯咖啡，或在 PayPal 上捐款。

感谢您的阅读。

文章来源：https://dev.to/themodernweb/how-to-create-music-player-with-pure-html-css-js-c1j
Devto 翻译
PREV
如何在 2022 年创建电子商务网站 [含源代码] 视频教程 代码主页 您可能觉得有用的文章
NEXT
如何使用纯 HTML、CSS、JS 视频教程代码文章创建音乐播放器，您可能会觉得有用