手写一个酷炫音乐播放器（附源代码+视频实操）

前端达人

于 2024-08-09 08:02:38 发布

阅读量34

点赞数

文章标签：音视频

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MjU2NDk0Nw==&mid=2247518991&idx=2&sn=5f35513acd34da155bf9e5f925dc6f36&chksm=a78c7ebb51988b4e77a519c1bef79b0f72c8952b2e870f60d932348b5d47696aba165a14a69e&scene=126&sessionid=0

版权

你是否曾梦想过拥有一个属于自己的音乐播放器？不再依赖现成的应用，亲手打造一个独一无二的音乐体验？今天，就让我们一起来看看如何用简单的代码，实现一个带有波形图的酷炫音乐播放器吧！

功能亮点：

音乐详情展示：自动显示当前播放歌曲的艺术家和歌曲名称。
播放控制：包括播放/暂停、上一首、下一首功能，操作便捷。
动态波形图：通过Wavesurfer.js库，实时显示音乐波形，让视觉效果更加炫酷。
旋转效果：播放音乐时，专辑封面图片将旋转起来，增强视觉体验。

源码获取

关注「阿森码上谈」公众号，回复"a1"获取源码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="MusicPlayer.css">
    <!-- Don't forget to add Font awesome 6 cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>Music player with Waveform</title>
</head>
<body>
    <div class="container">
        <div class="song-details">
            <p class="artist-name"><span>Artist: </span> Alan Walker</p> 
            <p class="song-name"><span>Song: </span> Alone</p>
        </div> 
        <div class="image">
            <img src="Images/image1.jpg" alt="">
        </div>
        <div class="btns">
            <button class="prev-btn btn"><i class="fa-solid fa-backward-step"></i></button>
            <button class="play-pause-btn btn"><i class="fa-solid fa-play"></i></button>
            <button class="next-btn btn"><i class="fa-solid fa-forward-step"></i></button>
        </div>
        <div id="waveform"></div>
    </div>
<!-- Wavesurfer library -->
<script src="https://unpkg.com/wavesurfer.js@7"></script>
<!-- Data file -->
<script src="Data.js"></script>
<!-- Script file -->
<script src="MusicPlayer.js"></script>
</body>
</html>

CSS代码

/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'poppins', sans-serif;
}

body{
 background:#ff69b4;
}

.container{
 padding-bottom:35px;
 background:#fff;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 border-radius:7px;
 width:340px;
}

.container .song-details{
 height:70px;
 width:100%;
 border-top-left-radius:7px;
 border-top-right-radius:7px;
 background:rgba(255, 105, 180, 0.3);
 padding:15px;
}

.container .song-details .artist-name,
.container .song-details .song-name{
margin-left:135px;
font-size:12px;
font-weight:600;
color:#ff1493;
text-transform:uppercase;
margin-top:2px;
}



.container .song-details .artist-name span,
.container .song-details .song-name span{
 color:#696969;
}

.container .image{
 height:110px;
 width:110px;
 border-radius:100%;
 margin-left:20px;
 margin-top:-45px;
 border:5px solid #fff;
}

.container .image img{
 height:100%;
 width:100%;
 border-radius:100%;
}

.container .image img.rotate-img{
 animation:rotate 5s linear infinite;
}

@keyframes rotate{
 0%{
    transform:rotate(0deg);
 }100%{
    transform:rotate(360deg);
 }
}

.container .btns{
 height:50px;
 width:205px;
 float:right;
 margin-top:-50px;
}

.container .btns button{
 all:unset;
 height:45px;
 width:45px;
 border:2px solid #ff1493;
 border-radius:100%;
 float:left;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-left:11px;
 color:#ff1493;
 font-size:22px;
 cursor:pointer;
}

.container #waveform{
 margin-top:35px;
 padding:0px 25px 0px 25px;
 cursor:pointer;
}

javascript代码

//codewithharsh_
let musicImg = document.querySelector('.container .image img');
let artist_name = document.querySelector('.container .song-details .artist-name');
let song_name = document.querySelector('.container .song-details .song-name');
let play_pause_btn = document.querySelector('.container .play-pause-btn');
let play_pause_icon = document.querySelector('.container .play-pause-btn i');
let nextBtn = document.querySelector('.container .next-btn');
let prevBtn = document.querySelector('.container .prev-btn');

let music_index = 1; //Music Index

window.addEventListener('load',()=>{
 loadMusic(music_index); //Calling loadMusic function on page load    
}); 


//loadMusic function
let loadMusic =(musicIndex)=>{
    artist_name.innerHTML = `<span>Artist: </span> ${allmusic[musicIndex - 1].artist}`;   
    song_name.innerHTML = `<span>Song: </span> ${allmusic[musicIndex - 1].name}`;
    musicImg.src = `${allmusic[musicIndex - 1].img}.jpg`;
}

//Creating music waveform by using wavesurfer api
var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: '#ddd',
            progressColor: '#FF1493', 
            barWidth: 1,
            responsive: true,
            height: 90,
            barRadius: 1
});
wavesurfer.load(`${allmusic[music_index - 1].src}.mp3`); //load Waveform of current music on page load

//Play Pause button Event
play_pause_btn.addEventListener('click',()=>{
  wavesurfer.playPause(); //Play pause music on play_pause_btn click
  if(play_pause_icon.classList.contains('fa-play')){ //if play_pause_icon contains "fa-play" classList
    //Remove "fa-play" class and Add "fa-pause" class in play_pause_icon
    play_pause_icon.classList.remove('fa-play');
    play_pause_icon.classList.add('fa-pause');
    musicImg.classList.add('rotate-img'); //Add "rotate-img" class in musicImg
  }else{
    //else Add "fa-play" class and Remove "fa-pause" class in play_pause_icon
    play_pause_icon.classList.add('fa-play');
    play_pause_icon.classList.remove('fa-pause');
    musicImg.classList.remove('rotate-img'); //Remove "rotate-img" class in musicImg
  }
})

//On music end
wavesurfer.on('finish', () => {
  nextBtn.click();
});

//Next music btn event
nextBtn.addEventListener('click',()=>{
 music_index++; //Increment of index by 1
 //If musicIndex greater than array length then musicIndex will be 1
 music_index > allmusic.length ? music_index = 1 : music_index = music_index; 
 loadMusic(music_index);
 wavesurfer.load(`${allmusic[music_index - 1].src}.mp3`);
 setTimeout(()=>{
   wavesurfer.play();
 },1000);
 if (play_pause_icon.classList.contains('fa-play')) {//if play_pause_icon contains "fa-play" classList
   //Remove "fa-play" class and Add "fa-pause" class in play_pause_icon
   play_pause_icon.classList.remove('fa-play');
   play_pause_icon.classList.add('fa-pause');
   musicImg.classList.add('rotate-img'); //Add "rotate-img" class in musicImg
 }
});

//Previous music btn event
prevBtn.addEventListener('click',()=>{
 music_index--; //Decrement of index by 1
 //If musicIndex less then 1 then musicIndex will be equal to array length
 music_index < 1 ? music_index = allmusic.length : music_index = music_index;
 loadMusic(music_index);
 wavesurfer.load(`${allmusic[music_index - 1].src}.mp3`);
 wavesurfer.setTime(0);
 setTimeout(()=>{
  wavesurfer.play();
}, 1000);
if (play_pause_icon.classList.contains('fa-play')) { //if play_pause_icon contains "fa-play" classList
   //Remove "fa-play" class and Add "fa-pause" class in play_pause_icon
   play_pause_icon.classList.remove('fa-play');
   play_pause_icon.classList.add('fa-pause');
   musicImg.classList.add('rotate-img'); //Add "rotate-img" class in musicImg
}
})

音乐数据Data.js

let allmusic = [
    {
        name:'Play Dead', //Music name
        artist:'Neffex', //Artist name
        img:'Images/image1', //Image path
        src:'Musics/music1' //Music path   
    }, 
    {
        name:'Blue Eyed Demon', 
        artist:'Roy Knox',
        img:'Images/image2',
        src:'Musics/music2'
    },
    {
        name:'Crazy', 
        artist:'Beuz & Jvna',
        img:'Images/image3',
        src:'Musics/music3'
    },
    {
        name: 'Get Through',
        artist: 'Neffex',
        img: 'Images/image4',
        src: 'Musics/music4'
    }
]

//You can add more songs like this