DEV Community

loading...
Cover image for How To Make Music Player Using JavaScript [ 6 KB Code Only ]

How To Make Music Player Using JavaScript [ 6 KB Code Only ]

backlinkn profile image backlinkn ・11 min read

I will show you how to make a music player using only HTML, CSS, and javascript code. You can easily build a professional song player using JavaScript programming code. I have made many more music players before. You can see those music players if you want. However, I have designed this music player completely in a modern way. To make it, I used the simplest programming code so that all types of designers could understand. Originally made using CSS and JavaScript programming code. In addition, a small amount of HTML code has been used.

Alt Text




Some special information about this music player

  • This music player is fully responsive and professional. As a result, it is effective for any device.

  • With this music player, you can easily change the song. Here you can add many songs together and play them one by one.

  • I have added 4 songs to this music player. You can add more songs if you want. Below are all the details on how to add. It has all the features of a regular music player.

  • You can change songs here, move songs back and forth.

  • In this case, a big screen has been used. Where the picture related to that song can be seen. This image must be saved in advance.

  • This image will also change when the song is changed.

  • There is also a timer at the top. There is room to show the full length of the song and how long the song is playing.

  • Above is the title of the song and a little bit of description.

I made it in a completely professional and modern way. Hope you like this design.

Step by step how to make this music player

If you want to design this music player, you should follow the steps below. I have given all the source code below to make it. You can also download the required code by clicking on the download button above. First of all, you create an HTML file then paste the structure given below.

<html>
<head>
     <style>
        Add CSS Code
     </style>

</head>
<body>
       Add Html Code
</body>
   <script>
       Add JavaScript Code
   </script>
</html>
Enter fullscreen mode Exit fullscreen mode

You will add those three codes following the information there. Copy and paste the HTML code in the place where the add HTML code is written. Copy and paste the CSS code in the place where the add CSS code is written. You can create a separate CSS file if you want. But in that case, you must attach your CSS file to the HTML. Then copy the JavaScript programming codes below and paste them on the top tractor where add JavaScript is written.

Add HTML code to build the structure of the music player

The following programming codes are HTML programming codes. I used a very small amount of HTML programming code to make this music player. You copy the code below and add it to the structure above.


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>

    <div class="bg-container">
        <img src="" alt="" id="background">
    </div><!--                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/-->
    <div class="player-container">
        <!-- Song -->
        <div class="img-container">
            <img src="" alt="" id="cover" class="active">
        </div>
        <h2 id="title"></h2>
        <h3 id="artist"></h3>
        <audio src=""></audio>
        <!-- Progress -->
        <div class="progress-container" id="progress-container">
            <div class="progress" id="progress"></div>
            <div class="duration-wrapper">
                <span id="current-time"></span>
                <span id="duration"></span>
            </div>
        </div><!--                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/-->
        <!-- Controls -->
        <div class="player-controls">
            <i class="fas fa-backward" id="prev" title="Previous"></i>
            <i class="fas fa-play main-button" id="play" title="Play"></i>
            <i class="fas fa-forward" id="next" title="Next"></i>
        </div>
    </div>

Enter fullscreen mode Exit fullscreen mode

Add CSS code to design it

I have used the most amount of CSS programming code to make this music player. You copy the following programming code and then add it to the project above.


@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #c9ced3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Nunito, sans-serif;
  font-size: 12px;
}                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
.bg-container {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: -1;
}

.bg-container img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  filter: blur(15px);
  -webkit-filter: blur(50px);
  transform: scale(1.1); 
}
                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
.player-container {
  height: 500px;
  width: 400px;
  background: #e7e7e7;
  border-radius: 20px;
  box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);
}

.img-container {
  width: 300px;
  height: 300px;
  position: relative;
  top: -50px;
  left: 50px;
  display: flex;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  justify-content: center;
  align-items: center;
}

.img-container img {
  height: 0;
  width: 0;
  opacity: 0;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);
  transition: .5s;
}
                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
.img-container img.active {
  transition: .5s;
  opacity: 1;
  width: 100%;
  height: 100%;
}


h2 {
  font-size: 25px;
  text-align: center;
  margin: 0;
}

h3 {
  font-size: 20px;
  text-align: center;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  font-weight: 400;
  margin: 5px 0 0;
}

/* Progress */
.progress-container {
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 40px 20px;
  height: 4px;
  width: 90%;
}

.progress {
  background: #242323;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
}

.duration-wrapper {
  position: relative;
  top: -25px;
  display: flex;
  justify-content: space-between;
}

/* Controls */
.player-controls {
  position: relative;
  top: -15px;
  left: 120px;
  width: 200px;
}

.fas {
  font-size: 30px;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  color: rgb(129, 129, 129);
  margin-right: 30px;
  cursor: pointer;
  user-select: none;
}

.fas:hover {
  filter: brightness(80%);
}

.main-button {
  font-size: 40px;
  position: relative;
  top: 3px;
}                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
/* Media Query: iPhone (Vertical) */
@media screen and (max-width: 376px) {
  .player-container {
    width: 95vw;
  }

  .img-container {
    left: 29px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 15px;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  }

  .player-controls {
    top: -10px;
    left: 100px;
  }
}

Enter fullscreen mode Exit fullscreen mode

Add JavaScript code to complete the music player

JavaScript programming code was originally used to make this music player professional and animated. Here is a small amount of JavaScript programming code I used. You copy those programming codes and then add them to the structure above.

 const image = document.querySelector('#cover');
const title = document.getElementById('title');
const artist = document.getElementById('artist');
const music = document.querySelector('audio');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const progress = document.getElementById('progress');                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
const progressContainer = document.getElementById('progress-container');
const prevBtn = document.getElementById('prev');
const playBtn = document.getElementById('play');
const nextBtn = document.getElementById('next');
const background = document.getElementById("background");

// Music
const songs = [
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/1.mp3',
    displayName: 'Yıldız Tozu',
    artist: 'Ozbi',
    cover: "https://images.genius.com/ee202c6f724ffd4cf61bd01a205eeb47.1000x1000x1.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/2.mp3',                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
    displayName: 'You\'re Somebody Else',
    artist: 'flora cash',
    cover: "https://pbs.twimg.com/media/D2NZH-2U4AAL9Xs.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/3.mp3',
    displayName: 'Powerless',
    artist: 'Linkin Park',
    cover: "https://images.genius.com/c5a58cdaab9f3199214f0e3c26abbd0e.1000x1000x1.jpg",
  },                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/4.mp3',
    displayName: 'Seni Dert Etmeler',
    artist: 'Madrigal',
    cover: "https://www.radyomega.fm/wp-content/uploads/2020/04/MADRIGAL-600.jpg",
  },
  {
    path: 'https://raw.githubusercontent.com/ustabasiibrahim/music-player/master/assets/music/5.mp3',
    displayName: 'Ederlezi',
    artist: 'Solomun',
    cover: "https://m.media-amazon.com/images/I/616t0841uvL._SS500_.jpg",
  },
];                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/

// Check if Playing
let isPlaying = false;

// Play
function playSong() {
  isPlaying = true;
  playBtn.classList.replace('fa-play', 'fa-pause');
  playBtn.setAttribute('title', 'Pause');
  music.play();                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
}

// Pause
function pauseSong() {
  isPlaying = false;
  playBtn.classList.replace('fa-pause', 'fa-play');
  playBtn.setAttribute('title', 'Play');
  music.pause();
}

// Play or Pause Event Listener
playBtn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong()));

// Update DOM
function loadSong(song) {                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  title.textContent = song.displayName;
  artist.textContent = song.artist;
  music.src = song.path;
  changeCover(song.cover);
}

function changeCover(cover) {
  image.classList.remove('active');
  setTimeout(() => {
    image.src = cover;
    image.classList.add('active');
  }, 100)
  background.src = cover;
} 

// Current Song                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
let songIndex = 0;

// Previous Song
function prevSong() {
  songIndex--;
  if (songIndex < 0) {
    songIndex = songs.length - 1;
  }
  loadSong(songs[songIndex]);
  playSong();
}

// Next Song
function nextSong() {
  songIndex++;                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
  if (songIndex > songs.length - 1) {
    songIndex = 0;
  }
  loadSong(songs[songIndex]);
  playSong();
}

// On Load - Select First Song
loadSong(songs[songIndex]);

// Update Progress Bar & Time
function updateProgressBar(e) {
  if (isPlaying) {
    const { duration, currentTime } = e.srcElement;
    // Update progress bar width                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
    // Calculate display for duration
    const durationMinutes = Math.floor(duration / 60);
    let durationSeconds = Math.floor(duration % 60);
    if (durationSeconds < 10) {
      durationSeconds = `0${durationSeconds}`;
    }
    // Delay switching duration Element to avoid NaN
    if (durationSeconds) {
      durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
    }
    // Calculate display for currentTime
    const currentMinutes = Math.floor(currentTime / 60);
    let currentSeconds = Math.floor(currentTime % 60);
    if (currentSeconds < 10) {                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
      currentSeconds = `0${currentSeconds}`;
    }
    currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
  }
}

// Set Progress Bar
function setProgressBar(e) {
  const width = this.clientWidth;
  const clickX = e.offsetX;
  const { duration } = music;
  music.currentTime = (clickX / width) * duration;
}

// Event Listeners
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
music.addEventListener('ended', nextSong);                                                                                                                                    /*position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%;min-height: 50%;filter: blur(15px);-webkit-filter: blur(50px);transform: scale(1.1); }.player-container {  height: 500px;dth: 400px;background: #e7e7e7;border-radius: 20px;box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3);}*/
music.addEventListener('timeupdate', updateProgressBar);
progressContainer.addEventListener('click', setProgressBar);


Enter fullscreen mode Exit fullscreen mode

If you add these three types of programming code to your project, you can easily make this music player. Hopefully, you didn't face any problems while making this music player. If so, you can definitely let me know in the comments.

Discussion

pic
Editor guide