Music player html | create music player using html css javascript - codewithrandom

Music player html | create music player using html css javascript 





Music player html | create music player using html css javascript




Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Music player html. We use HTML & CSS and javascript for this Music player html. Hope you enjoy our blog so let's start with a basic HTML structure for a Music player html.

HTML code for Music player

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <link  
    rel="stylesheet"  
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"  
   />  
   <title>Music Player</title>  
  </head>  
  <body>  
   <h1>Music Player</h1>  
   <div class="music-container" id="music-container">  
    <div class="music-info">  
     <h4 class="title" id="title"></h4>  
     <div class="progress-container" id="progress-container">  
      <div class="progress" id="progress"></div>  
     </div>  
    </div>  
    <audio src="./music/happyrock.mp3" id="audio"></audio>  
    <div class="img-container">  
     <img src="./images/happyrock.jpg" alt="music-cover" id="cover" />  
    </div>  
    <div class="navigation">  
     <button id="prev" class="action-btn">  
      <i class="fa fa-backward" aria-hidden="true"></i>  
     </button>  
     <button id="play" class="action-btn action-btn-big">  
      <i class="fa fa-play" aria-hidden="true"></i>  
     </button>  
     <button id="next" class="action-btn">  
      <i class="fa fa-forward" aria-hidden="true"></i>  
     </button>  
    </div>  
   </div>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all HTML code for the Music player. Now, you can see output without CSS, then we write CSS for our music player.
output
Music player html | create music player using html css javascript

CSS Code for Music player 

 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");  
 * {  
  outline: none;  
  box-sizing: border-box;  
 }  
 body {  
  background-image: linear-gradient(  
   0deg,  
   rgba(247, 247, 247, 1) 23.8%,  
   rgba(252, 221, 221, 1) 92%  
  );  
  font-family: "Open Sans", sans-serif;  
  margin: 0;  
  height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  flex-direction: column;  
 }  
 .music-container {  
  background-color: #fff;  
  border-radius: 15px;  
  box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);  
  display: flex;  
  padding: 20px 30px;  
  position: relative;  
  margin: 100px 0;  
  z-index: 10;  
 }  
 .img-container {  
  position: relative;  
  width: 110px;  
 }  
 .img-container::after {  
  content: "";  
  background-color: #fff;  
  border-radius: 50%;  
  position: absolute;  
  bottom: 100%;  
  left: 50%;  
  width: 20px;  
  height: 20px;  
  transform: translate(-50%, 50%);  
  box-shadow: 0 0 0px 10px #000;  
 }  
 .img-container img {  
  border-radius: 50%;  
  object-fit: cover;  
  height: 110px;  
  width: inherit;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  animation: rotate 3s linear infinite;  
  animation-play-state: paused;  
 }  
 .music-container.play .img-container img {  
  animation-play-state: running;  
 }  
 @keyframes rotate {  
  from {  
   transform: rotate(0deg);  
  }  
  to {  
   transform: rotate(360deg);  
  }  
 }  
 .navigation {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  z-index: 1;  
 }  
 .action-btn {  
  background-color: #fff;  
  border: 0;  
  color: #dfdbdf;  
  font-size: 20px;  
  cursor: pointer;  
  padding: 10px;  
  margin: 0 20px;  
 }  
 .action-btn.action-btn-big {  
  color: #cdc2d0;  
  font-size: 30px;  
 }  
 .music-info {  
  background-color: rgba(255, 255, 255, 0.5);  
  width: calc(100% - 40px);  
  padding: 10px 10px 10px 150px;  
  border-radius: 15px 15px 0px 0px;  
  position: absolute;  
  top: 0;  
  left: 20px;  
  opacity: 0;  
  transform: translateY(0%);  
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;  
  z-index: 0;  
 }  
 .music-container.play .music-info {  
  opacity: 1;  
  transform: translateY(-100%);  
 }  
 .music-info h4 {  
  margin: 0;  
 }  
 .progress-container {  
  background-color: #fff;  
  border: 5px;  
  cursor: pointer;  
  margin: 10px 0;  
  height: 4px;  
  width: 100%;  
 }  
 .progress {  
  background-color: #fe8daa;  
  border-radius: 5px;  
  height: 100%;  
  width: 0%;  
  transform: width 0.1s linear;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Music player html | create music player using html css javascript

Now add javascript for the Music player!

Javascript code for Music player

 const musicContainer = document.getElementById("music-container");  
 const playBtn = document.getElementById("play");  
 const prevBtn = document.getElementById("prev");  
 const nextBtn = document.getElementById("next");  
 const audio = document.getElementById("audio");  
 const progress = document.getElementById("progress");  
 const progressContainer = document.getElementById("progress-container");  
 const title = document.getElementById("title");  
 const cover = document.getElementById("cover");  
 // Songs Titles  
 const songs = ["happyrock", "jazzyfrenchy", "ukulele"];  
 // KeepTrack of song  
 let songIndex = 0;  
 // Initially load song details into DOM  
 loadSong(songs[songIndex]);  
 // Update song details  
 function loadSong(song) {  
  title.innerText = song;  
  audio.src = `./music/${song}.mp3`;  
  cover.src = `./images/${song}.jpg`;  
 }  
 // Play Song  
 function playSong() {  
  musicContainer.classList.add("play");  
  playBtn.querySelector("i.fa").classList.remove("fa-play");  
  playBtn.querySelector("i.fa").classList.add("fa-pause");  
  audio.play();  
 }  
 // Pause Song  
 function pauseSong() {  
  musicContainer.classList.remove("play");  
  playBtn.querySelector("i.fa").classList.add("fa-play");  
  playBtn.querySelector("i.fa").classList.remove("fa-pause");  
  audio.pause();  
 }  
 // Previous Song  
 function prevSong() {  
  songIndex--;  
  if (songIndex < 0) {  
   songIndex = songs.length - 1;  
  }  
  loadSong(songs[songIndex]);  
  playSong();  
 }  
 // Next Song  
 function nextSong() {  
  songIndex++;  
  if (songIndex > songs.length - 1) {  
   songIndex = 0;  
  }  
  loadSong(songs[songIndex]);  
  playSong();  
 }  
 // Update Progress bar  
 function updateProgress(e) {  
  const { duration, currentTime } = e.srcElement;  
  const progressPerCent = (currentTime / duration) * 100;  
  progress.style.width = `${progressPerCent}%`;  
 }  
 // Set Progress  
 function setProgress(e) {  
  const width = this.clientWidth;  
  const clickX = e.offsetX;  
  const duration = audio.duration;  
  audio.currentTime = (clickX / width) * duration;  
 }  
 // Event Listeners  
 playBtn.addEventListener("click", () => {  
  const isPlaying = musicContainer.classList.contains("play");  
  if (isPlaying) {  
   pauseSong();  
  } else {  
   playSong();  
  }  
 });  
 // Change Song  
 prevBtn.addEventListener("click", prevSong);  
 nextBtn.addEventListener("click", nextSong);  
 // Time/Song Update  
 audio.addEventListener("timeupdate", updateProgress);  
 // Click On progress Bar  
 progressContainer.addEventListener("click", setProgress);  
 // Song End  
 audio.addEventListener("ended", nextSong);  
Final output

Music player html | create music player using html css javascript

note- use music & image yourself!
Now we have completed our javascript section,  Here is our updated output with javascriptHope you like Music player. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

Check out more.....









In this post, we learn how to create a Music player using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 


Post a Comment

Previous Post Next Post