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

视频教程

代码

您可能觉得有用的文章

大家好，今天我们将学习如何仅使用 HTML、CSS 和 JS 轻松创建一个音乐播放器，无需其他库。我们的音乐播放器分为三个部分或屏幕：主屏幕、播放器屏幕和播放列表部分。主屏幕部分有一个流畅的滑块，并且支持水平滚动。这款音乐播放器最棒的地方在于它可以最小化播放器。没错，你可以最小化或最大化播放器本身。这使得这个项目成为一个非常棒的音乐播放器。

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

视频教程

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

因此，不要浪费更多时间，让我们看看如何编写代码。

代码

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

您可以看到我们有一个名为的文件data.js。此文件包含我们的音乐相关数据。您可以在下面看到。



let songs = [
    {
        name: 'song 1',
        path: 'assets/musics/Song 1.mp3',
        artist: 'artist 1',
        cover: 'assets/images/cover 1.png'
    },
    {
        name: 'song 2',
        path: 'assets/musics/Song 2.mp3',
        artist: 'artist 2',
        cover: 'assets/images/cover 2.png'
    },
    // +6 more
]

如果您看到我们的数据 JS，您会注意到我们的音乐数据。我们已将音乐相关数据存储在这里。

因此，不要浪费更多时间，让我们编写主页部分的代码。

主页部分

打开index.html并在其中开始编写基本的 HTML 结构。同时链接style.css和两个 JS 文件。记得在之前添加data.jsfile app.js。否则我们将无法访问数据。

链接完所有文件后，我们来创建第一个内容。图片轮播。在 body 标签内编写代码。



<!-- home section -->

<section class="home-section">
    <!-- carousel -->
    <div class="carousel">
        <img src="assets/images/cover 1.png" class="active" alt="">
        <img src="assets/images/cover 2.png" alt="">
        <img src="assets/images/cover 3.png" alt="">
        <img src="assets/images/cover 4.png" alt="">
        <img src="assets/images/cover 5.png" alt="">
    </div>
</section>

注意——将轮播包装在home-section元素内部。



@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background: #141414;
    --text-color: #fff;
    --primary-color: #63ff69;
    --secondary-color: #000;
    --alpha-color: rgba(0, 0, 0, 0.5);
    --shadow: 0 15px 40px var(--alpha-color);
}

html{
    background: var(--background);
    display: flex;
    justify-content: center;
}

body{
    width: 100%;
    height: 100vh;
    max-width: 375px;
    position: relative;
    background: var(--background);
    font-family: 'roboto', sans-serif;
    color: var(--text-color);
}

::-webkit-scrollbar{
    display: none;
}

/* home section */

.home-section{
    width: 100%;
    padding: 20px;
    height: 100%;
    padding-bottom: 100px;
    overflow-y: auto;
}

/* carousel */

.carousel{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
}

.carousel img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: 1s;
}

.carousel img.active{
    opacity: 1;
}

您可以看到我们在这里使用 CSS 变量，因此将来我们可以轻松更改此音乐播放器主题。

输出

请注意，这是为移动视图设计的，这就是我使用 chrome 检查器以移动尺寸查看它的原因。

现在创建水平滚动播放列表。里面home-section



<h1 class="heading">recently played</h1>
<div class="playlists-group">
    <div class="playlist-card">
        <img src="assets/images/cover 9.png" class="playlist-card-img" alt="">
        <p class="playlist-card-name">top international</p>
    </div>
    <div class="playlist-card">
        <img src="assets/images/cover 2.png" class="playlist-card-img" alt="">
        <p class="playlist-card-name">BTS collection</p>
    </div>
    //+3 more
</div>
<h1 class="heading">based on your listening</h1>
<div class="playlists-group">
    <div class="playlist-card">
        <img src="assets/images/cover 11.png" class="playlist-card-img" alt="">
        <p class="playlist-card-name">top international</p>
    </div>
    <div class="playlist-card">
        <img src="assets/images/cover 12.png" class="playlist-card-img" alt="">
        <p class="playlist-card-name">BTS collection</p>
    </div>
    //+3 more
</div>



.heading{
    margin: 30px 0 10px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 30px;
}

/* playlists card */

.playlists-group{
    position: relative;
    width: 100%;
    min-height: 200px;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.playlist-card{
    flex: 0 0 auto;
    max-width: 150px;
    height: 100%;
    margin-right: 20px;
}

.playlist-card-img{
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 20px;
}

.playlist-card-name{
    width: 100%;
    text-align: justify;
    font-size: 20px;
    text-transform: capitalize;
    padding: 5px;
}

输出

我们已经完成了主页部分。但是轮播功能还不能正常工作，所以让我们让它正常工作。打开app.js文件并开始编码。



///// carousels/////////////////

const carousel = [...document.querySelectorAll('.carousel img')];

let carouselImageIndex = 0;

const changeCarousel = () => {
    carousel[carouselImageIndex].classList.toggle('active');

    if(carouselImageIndex >= carousel.length - 1){
        carouselImageIndex = 0;
    } else{
        carouselImageIndex++;
    }

    carousel[carouselImageIndex].classList.toggle('active');
}

setInterval(() => {
    changeCarousel();
}, 3000);

您可以看到，我们首先选择轮播元素，然后每 3 秒切换一次图像active类。

现在让我们创建我们的播放器部分。

玩家

首先将其最小化。



<section class="music-player-section">

    <img src="assets/images/back.png" class="back-btn icon hide" alt="">
    <img src="assets/images/nav.png" class="nav-btn icon hide" alt="">

    <h1 class="current-song-name">song 1</h1>
    <p class="artist-name hide">artist 1</p>

    <img src="assets/images/cover 1.png" class="cover hide" alt="">

    <div class="seek-bar-container">
        <input type="range" class="music-seek-bar" value="0">
        <p class="current-time hide">00 : 00</p>
        <p class="duration hide">00 : 00</p>
    </div>

    <div class="controls">
        <span class="fas fa-redo"></span>
        <div class="main">
            <i class="fas fa-backward active"></i>
            <i class="fas fa-play active"></i>
            <i class="fas fa-pause"></i>
            <i class="fas fa-forward active"></i>
        </div>
        <input type="range" class="volume-slider" max="1" value="1" step="0.1">
        <span class="fas fa-volume-up"></span>
    </div>

</section>

如果你查看我们的播放器结构，你会注意到我们hide为很多元素都添加了一个类。这个hide类表示元素在最小化视图中会被隐藏。我们给所有元素都赋予了相同的类，这样我们就可以轻松地在 CSS 中设置样式。



* music player */

/* minimize view */

.music-player-section{
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: var(--alpha-color);
    backdrop-filter: blur(50px);
    transition: 1s;
}

.music-seek-bar{
    -webkit-appearance: none;
    width: 100%;
    position: absolute;
    top: -4px;
    height: 8px;
    background: var(--secondary-color);
    overflow: hidden;
}

.music-seek-bar::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 10px;
    width: 5px;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: -400px 0 0 400px var(--primary-color);
}

.current-song-name{
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    margin-top: 5px;
    text-transform: capitalize;
}

.controls{
    position: relative;
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 30px;
}

.controls span{
    display: none;
    opacity: 0;
    transition: 1s;
}

.music-player-section.active .controls{
    justify-content: space-between;
}

.music-player-section.active .controls span{
    font-size: 25px;
    display: block;
    opacity: 0.5;
}

.music-player-section.active .controls span.active{
    color: var(--primary-color);
    opacity: 1;
}

.controls .main i{
    margin: 0 5px;
    display: none;
}

.controls .main i.active{
    display: inline;
}

这些样式只是为了最小化视图。

输出

现在让我们创建最大化视图的样式。



/* maximize music player styles */

.music-player-section .hide{
    display: none;
    opacity: 0;
    transition: 1s;
}

.music-player-section.active .hide{
    display: block;
    opacity: 1;
}

.music-player-section.active{
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.music-player-section.active .music-seek-bar{
    position: relative;
    display: block;
    border-radius: 50px;
    margin: auto;
}

.music-player-section.active .current-song-name{
    font-size: 40px;
}

.music-player-section.active .controls{
    width: 100%;
    font-size: 50px;
}

.artist-name{
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
}

.cover{
    width: 30vh;
    height: 30vh;
    object-fit: cover;
    margin: auto;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.current-time{
    position: absolute;
    margin-top: 5px;
    left: 30px;
}

.duration{
    position: absolute;
    margin-top: 5px;
    right: 30px;
}

.icon{
    position: absolute;
    top: 60px;
    transform: scale(1.3);
}

.back-btn{
    left: 40px;
}

.nav-btn{
    right: 40px;
}

/* volume button */

.volume-slider{
    -webkit-appearance: none;
    width: 100px;
    height: 40px;
    position: absolute;
    right: -35px;
    bottom: 80px;
    transform: rotate(-90deg);
    border-radius: 20px;
    background: var(--alpha-color);
    overflow: hidden;
    opacity: 0;
    display: none;
}

.volume-slider.active{
    opacity: 1;
    display: block;
}

.volume-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 40px;
    width: 10px;
    background: var(--primary-color);
    box-shadow: -200px 0 1px 200px var(--primary-color);
}

现在像这样添加active类来检查这些样式。music-player-section



<section class="music-player-section active">
...
</section>

输出

我们最终会让这个播放器实现功能。现在，active先从播放器部分移除这个类。接下来，我们来创建播放列表部分。

播放列表部分



<section class="playlist active">

    <img src="assets/images/back.png" class="back-btn icon" alt="">

    <h1 class="title">playlist</h1>

    <div class="queue active">
        <div class="queue-cover">
            <img src="assets/images/cover 1.png" alt="">
            <i class="fas fa-pause"></i>
        </div>
        <p class="name">song 1</p>
    </div>
    // +7 more
</section>



/* playlist section */

.playlist{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -100%;
    padding: 30px 0;
    background: var(--background);
    z-index: 3;
    transition: 1s;
    overflow: auto;
}

.playlist.active{
    right: 0;
}

.title{
    font-weight: 300;
    font-size: 40px;
    text-align: center;
    margin-top: 15px;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.queue{
    width: 100%;
    height: 80px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    border-top: 2px solid var(--alpha-color);
}

.queue-cover{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    position: relative;
}

.queue-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.queue-cover i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: var(--primary-color);
    display: none;
}

.queue.active i{
    display: block;
}

.queue .name{
    font-size: 22px;
    text-transform: capitalize;
}

输出

我们已经完成了所有样式设置。active同时，从播放列表部分移除类。

现在让我们使用 JS 来让这个音乐应用程序充分发挥作用。



/////////////////////navigations////////////

////////////toggling music player

const musicPlayerSection = document.querySelector('.music-player-section');

let clickCount = 1;

musicPlayerSection.addEventListener('click', () => {
    // checking for double click manually idk why default dbclick event was not working with this project If you know what could the problem Kindly tell me in the discussion below
    if(clickCount >= 2){
        musicPlayerSection.classList.add('active');
        clickCount = 1;
        return;
    }
    clickCount++;
    setTimeout(() => {
        clickCount = 1;
    }, 250);
})

/////// back from music player

const backToHomeBtn = document.querySelector('.music-player-section .back-btn');

backToHomeBtn.addEventListener('click', () => {
    musicPlayerSection.classList.remove('active');
})

//////// access playlist

const playlistSection = document.querySelector('.playlist');
const navBtn = document.querySelector('.music-player-section .nav-btn');

navBtn.addEventListener('click', () => {
    playlistSection.classList.add('active');
})

////////// back from playlist to music player

const backToMusicPlayer = document.querySelector('.playlist .back-btn');

backToMusicPlayer.addEventListener('click', () => {
    playlistSection.classList.remove('active');
})

//////navigation done ////////////////

这是基本的 JS 代码，我还添加了注释。如果您对这段代码有任何疑问，欢迎随时在讨论中问我。导航已经完成。接下来，让我们创建音乐播放器。

音乐

为了实现音乐播放器，我们需要在页面中添加音频源，但我们目前还没有。因此，请在页面中创建一个音频元素index.html。在 body 标签的开头创建此元素。



<audio src="" id="audio-source"></audio>

现在我们必须创建很多功能，所以在开始之前让我们快速选择我们可能需要操作的所有元素。



/////// music

let currentMusic = 0;

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

const seekBar = document.querySelector('.music-seek-bar');
const songName = document.querySelector('.current-song-name');
const artistName = document.querySelector('.artist-name');
const coverImage = document.querySelector('.cover');
const currentMusicTime = document.querySelector('.current-time');
const musicDuration = document.querySelector('.duration');

const queue = [...document.querySelectorAll('.queue')];

// select all buttons here

const forwardBtn = document.querySelector('i.fa-forward');
const backwardBtn = document.querySelector('i.fa-backward');
const playBtn = document.querySelector('i.fa-play');
const pauseBtn = document.querySelector('i.fa-pause');
const repeatBtn = document.querySelector('span.fa-redo');
const volumeBtn = document.querySelector('span.fa-volume-up');
const volumeSlider = document.querySelector('.volume-slider');

选择太多了，不是吗？现在设置音乐源。



// funtion for setting up music

const setMusic = (i) => {
    seekBar.value = 0;
    let song = songs[i];
    currentMusic = i;

    music.src = song.path;

    songName.innerHTML = song.name;
    artistName.innerHTML = song.artist;
    coverImage.src = song.cover;

    setTimeout(() => {
        seekBar.max = music.duration;
        musicDuration.innerHTML = formatTime(music.duration);
    }, 300);
    currentMusicTime.innerHTML = '00 : 00';
    queue.forEach(item => item.classList.remove('active'));
    queue[currentMusic].classList.add('active');
}

setMusic(0);

我建议观看教程视频中的这部分，因为我在那里一步一步地完成了这段代码。

您可能会注意到，为了设置持续时间，我们调用了formatTime。所以现在就创建它。



// format duration in 00 : 00 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}`;
}

现在让我们添加播放/暂停事件。



// playBtn click event

playBtn.addEventListener('click', () => {
    music.play();
    playBtn.classList.remove('active');
    pauseBtn.classList.add('active');
})


// pauseBtn click event

pauseBtn.addEventListener('click', () => {
    music.pause();
    pauseBtn.classList.remove('active');
    playBtn.classList.add('active');
})

我们已经完成了音乐的设置以及播放/暂停。现在来创建前进/后退事件。



//  forward btn

forwardBtn.addEventListener('click', () => {
    if(currentMusic >= songs.length - 1){
        currentMusic = 0;
    } else{
        currentMusic++;
    }
    setMusic(currentMusic);
    playBtn.click();
})

// backward btn

backwardBtn.addEventListener('click', () => {
    if(currentMusic <= 0){
        currentMusic = songs.length - 1;
    } else{
        currentMusic--;
    }
    setMusic(currentMusic);
    playBtn.click();
})

由于我们快完成了，现在创建搜索栏功能。



// seekbar events

setInterval(() => {
    seekBar.value = music.currentTime;
    currentMusicTime.innerHTML = formatTime(music.currentTime);
    if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){
        if(repeatBtn.className.includes('active')){
            setMusic(currentMusic);
            playBtn.click();
        } else{
            forwardBtn.click();
        }
    }
}, 500)

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

完成此操作后，创建重复功能和音量选项。



// repeat button

repeatBtn.addEventListener('click', () => {
    repeatBtn.classList.toggle('active');
})

// volume section

volumeBtn.addEventListener('click', () => {
    volumeBtn.classList.toggle('active');
    volumeSlider.classList.toggle('active');
})

volumeSlider.addEventListener('input', () => {
    music.volume = volumeSlider.value;
})

我们的播放器已经完成了。最后一步是让播放列表可以正常运行。具体操作如下。



queue.forEach((item, i) => {
    item.addEventListener('click', () => {
        setMusic(i);
        playBtn.click();
    })
})

就这样。所有功能都完成了。播放器、导航、播放列表、轮播都完成了。希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区留言。

您可能觉得有用的文章

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

感谢您的阅读。

文章来源：https://dev.to/themodernweb/how-to-create-music-player-with-pure-html-css-js-34lc

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

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

视频教程

代码

您可能觉得有用的文章

视频教程

代码

主页部分

输出

输出

玩家

输出

输出

播放列表部分

输出

导航

音乐

您可能觉得有用的文章