Build a Music Player with HTML CSS and JavaScript

By
Asif Ali
-
0

Heyevery let’s build a Music Player with HTML CSS and JavaScript, Inside the project has many features such as Play, Next, Previous songs and finally you can play the song at a particular timeframe. So, Let’s get started to create it from scratch.

In today’s digital age, music has become an integral part of our lives. With the help of modern web development technologies, you can create your own music player to enjoy your favorite tunes whenever and wherever you want. In this article, we will guide you through the process of building a simple yet functional music player using HTML, CSS, and JavaScript.

HTML (HyperText Markup Language): HTML is the foundation of any web page. It is used to structure the content and layout of your music player. You will create the structure of your music player by defining elements such as buttons, progress bars, and album artwork. HTML is responsible for organizing the visual components that will make up your player.

CSS (Cascading Style Sheets): CSS is used to style and design your music player. You can change the colors, fonts, and layout to match your preferences. It gives your player its visual appeal and defines how it will look to the user. With CSS, you can make your music player visually appealing and user-friendly.

JavaScript: JavaScript is the programming language that adds functionality to your music player. You can use JavaScript to control the audio playback, handle user interactions, and update the player’s display in real time. This is where the magic happens, as it allows you to create a responsive and interactive music player.

Build a Music Player with HTML CSS and JavaScript

Before moving the codes I made a video tutorial to build a Music Player with HTML CSS and JavaScript. You can watch the complete tutorial and learn everything step by step as you want. I hope you like the tutorial, If you need the source codes you can get the codes below.

I hope you’ve watched the complete tutorial and learned something new from the tutorial, Let’s look at the source codes of the particular projects.

You May Also Like:

HTML Structure:

Start by creating the basic HTML structure for your music player. Define the elements you need, such as the audio player, play/pause button, volume control, and progress bar. Make sure to use appropriate HTML tags to create a clear structure.

<!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="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <script defer src="js/script.js"></script>
    <title>Music Player | OnlineITtuts Tutorials</title>
  </head>
  <body>
    <div class="background">
      <img src="imgs_audio/img-1.jpg" id="bg_img" />
    </div>

    <div class="container">
      <!--===============Player Image================= -->
      <div class="player_img">
        <img src="imgs_audio/img-1.jpg" id="cover" class="active" />
      </div>

      <!--============Player Content -->
      <h2 id="music_title">Capital Letters</h2>
      <h3 id="musric_artist">Lorem, ipsum dolor.</h3>

      <!--==============Player Progress & Timmer -->
      <div class="player_progress" id="player_progress">
        <div class="progress" id="progress">
          <div class="music_duration">
            <span id="current_time">0:00</span>
            <span id="duration">0:00</span>
          </div>
        </div>
      </div>

      <!--==============Player Controllers -->
      <div class="player_controls">
        <i class="fa-solid fa-backward" title="Previous" id="prev"></i>
        <i class="fa-solid fa-play play-button" title="Play" id="play"></i>
        <i class="fa-solid fa-forward" title="Next" id="next"></i>
      </div>
    </div>
  </body>
</html>

CSS Styling:

Use CSS to style your player. You can choose colors, fonts, and layouts that suit your taste. Make sure your player is visually appealing and easy to use. CSS will help you achieve the desired look and feel.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "poppins", sans-serif;
  font-size: 0.8rem;
  overflow: hidden;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.background img {
  position: absolute;
  min-width: 50%;
  min-height: 50%;
  margin: auto;
  filter: blur(15px);
  -webkit-filter: blur(50px);
  transform: scale(1.1);
}

.container {
  background-color: #fff;
  width: 400px;
  height: 500px;
  border-radius: 1rem;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.player_img {
  width: 300px;
  height: 300px;
  position: relative;
  top: -50px;
  left: 50px;
}

.player_img img {
  object-fit: cover;
  height: 0;
  width: 0;
  opacity: 0;
  box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.player_img img.active {
  width: 100%;
  height: 100%;
  opacity: 1;
}

h2 {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 500;
}

h3 {
  font-size: 1rem;
  text-align: center;
  color: #c6bfbf;
}

.player_progress {
  background-color: #c6bfbf;
  border-radius: 5px;
  height: 6px;
  width: 90%;
  margin: 40px 20px 35px;
  position: relative;
  cursor: pointer;
}

.progress {
  background-color: #212121;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  transition: all 0.2s linear;
}

.music_duration {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -25px;
}

.player_controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-solid {
  font-size: 30px;
  color: #666;
  cursor: pointer;
  margin-right: 30px;
  user-select: none;
  transition: all 0.3s ease-in;
}

.fa-solid:hover {
  filter: brightness(40%);
}

.play-button {
  font-size: 44px;
}

JavaScript Functionality:

This is where the real work begins. Using JavaScript, you can add functionality to your music player. You’ll need to create functions to play, pause, stop, and control the volume of the audio. You can also use JavaScript to update the progress bar as the song plays and display the song’s title and artist.

"use strict";

const imgEl = document.getElementById("bg_img");
const imgCoverEl = document.getElementById("cover");
const musicTitleEl = document.getElementById("music_title");
const musicArtistEl = document.getElementById("musric_artist");
const playerProgressEl = document.getElementById("player_progress");
const progressEl = document.getElementById("progress");
const currentTimeEl = document.getElementById("current_time");
const durationEl = document.getElementById("duration");

const prevBtnEl = document.getElementById("prev");
const playvBtnEl = document.getElementById("play");
const nextvBtnEl = document.getElementById("next");

const songs = [
  {
    path: "imgs_audio/1.mp3",
    displayName: "Sugar & Brownies",
    cover: "imgs_audio/img-1.jpg",
    artist: "DHARIA",
  },
  {
    path: "imgs_audio/2.mp3",
    displayName: "Alone, Pt. II",
    cover: "imgs_audio/img-2.jpg",
    artist: "Alan Walker & Ava Max",
  },
  {
    path: "imgs_audio/3.mp3",
    displayName: "Let Me Love You ft",
    cover: "imgs_audio/img-3.jpg",
    artist: "Justin Bieber",
  },
  {
    path: "imgs_audio/4.mp3",
    displayName: "On The Floor ft",
    cover: "imgs_audio/img-4.jpg",
    artist: "Jennifer Lopez",
  },
];

const music = new Audio();

let musicIndex = 0;
let isPlaying = false;

//================== Play Song  True or False====================
function togglePlay() {
  if (isPlaying) {
    pauseMusic();
  } else {
    playMusic();
  }
}

//================== Play Music====================
function playMusic() {
  isPlaying = true;
  playvBtnEl.classList.replace("fa-play", "fa-pause");
  playvBtnEl.setAttribute("title", "pause");
  music.play();
}

//================== Pause Music====================
function pauseMusic() {
  isPlaying = false;
  playvBtnEl.classList.replace("fa-pause", "fa-play");
  playvBtnEl.setAttribute("pause", "title");
  music.pause();
}

//================== Load Songs ====================
function loadMusic(songs) {
  music.src = songs.path;
  musicTitleEl.textContent = songs.displayName;
  musicArtistEl.textContent = songs.artist;
  imgCoverEl.src = songs.cover;
  imgEl.src = songs.cover;
}

//================== Change Music ====================
function changeMusic(direction) {
  musicIndex = musicIndex + direction + (songs.length % songs.length);
  loadMusic(songs[musicIndex]);
  playMusic();
}

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

//================== Set Progress ====================
function updateProgressBar() {
  const { duration, currentTime } = music;
  const ProgressPercent = (currentTime / duration) * 100;
  progressEl.style.width = `${ProgressPercent}%`;

  const formattime = (timeRanges) =>
    String(Math.floor(timeRanges)).padStart(2, "0");
  durationEl.textContent = `${formattime(duration / 60)} : ${formattime(
    duration % 60,
  )}`;
  currentTimeEl.textContent = `${formattime(currentTime / 60)} : ${formattime(
    currentTime % 60,
  )}`;
}

//================= Btn Events========================
const btnEvents = () => {
  playvBtnEl.addEventListener("click", togglePlay);
  nextvBtnEl.addEventListener("click", () => changeMusic(1));
  prevBtnEl.addEventListener("click", () => changeMusic(-1));

  //========= Progressbar===========================
  music.addEventListener("ended", () => changeMusic(1));
  music.addEventListener("timeupdate", updateProgressBar);
  playerProgressEl.addEventListener("click", setProgressBar);
};

//================= Btn Events========================
document.addEventListener("DOMContentLoaded", btnEvents);

//============ Calling Load Music
loadMusic(songs[musicIndex]);

User Interaction:

Consider user interactions, such as clicking the play/pause button or adjusting the volume. Use event listeners in JavaScript to respond to these actions. Make sure your music player is intuitive and user-friendly.

Album Artwork and Metadata:

If you want to display album artwork and song metadata, you can fetch this information using JavaScript. This adds a visual and informational element to your player.

Testing and Debugging:

Test your music player in various browsers to ensure it works correctly. Debug any issues that may arise during testing to provide a seamless user experience.

Hosting Your Music:

You can host your music files on a server or use online streaming services to play songs in your player. Make sure your audio files are in the appropriate format and are accessible.

Deployment:

Once you are satisfied with your music player’s functionality and appearance, you can deploy it to the web. Choose a hosting service or a platform that allows you to share your creation with others.

Conclusion

Building a music player using HTML CSS and JavaScript is a fun and educational project for web developers. It allows you to combine these three essential web technologies to create an interactive and visually appealing music player.

By following the steps outlined in this article, you can have your own music player up and running in no time, giving you the joy of listening to your favorite tracks with your very own custom player. So, get creative and start building your music player today!

o time, giving you the joy of listening to your favorite tracks with your very own custom player. So, get creative and start building your music player today!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.