Overview

In this blog, we’ve covered the step-by-step process of creating a music player form using HTML,CSS and JavaScript. We started by setting up a new project name music player.We make basic structure using HTML and JavaScript elements, and basic styling was applied for improved appearance by CSS. With this overview, you should be equipped to start creating your own music player, tailored to your specific needs.

Step 1: Setting up the Environment

We’ll start by setting up a project.

After creating project folder. We make a file and name it index.html.

Now copy paste the below given code in index.html.

				
					<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Music Player</title>
  </head>
  <body>
    <h1>Music Player</h1>
    <div class="music-container" id="music-container">
      <div class="music-info">
        <h2 id="title" class="title"></h2>
        <div class="progress-container" id="progress-container">
          <div class="progress" id="progress"></div>
        </div>
      </div>
      <audio
        src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/music/summer.mp3?raw=true"
        id="audio"
      ></audio>
      <div class="img-container">
        <img decoding="async"
          data-src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/summer.jpg?raw=true"
          alt="music-cover"
          id="cover"
 src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" /><noscript><img decoding="async"
          src="https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/summer.jpg?raw=true"
          alt="music-cover"
          id="cover"
        /></noscript>
      </div>
      <div class="navigation">
        <button id="prev" class="action-btn">
          <i class="fas fa-backward"></i>
        </button>
        <button id="play" class="action-btn action-btn-big">
          <i class="fas fa-play"></i>
        </button>
        <button id="next" class="action-btn">
          <i class="fas fa-forward"></i>
        </button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Creating a CSS file for styling.

Make a another file name style.css.

Open style.css and copy paste the below given code.

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

* {
  box-sizing: border-box;
}

body {
  background-color: #f7f7f7;
  background-image: linear-gradient(
    0deg,
    rgba(247,247,247, 1) 23.8%,
    rgba(252, 221, 221, 1) 92%
  );
  font-family: "Rubik", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.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 img {
  border-radius: 50%;
  object-fit: cover;
  height: 110px;
  width: inherit;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: rotateImage 3s linear infinite;
  animation-play-state: paused;
}

.img-container::after {
  content: '';
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  bottom: 100%;
  left: 50%;
  height: 20px;
  width: 20px;
  transform: translate(-50%, 50%);
}

.music-container.play .img-container img {
  animation-play-state: running;
}

@keyframes rotateImage {
  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:focus {
  outline: none;
}

.action-btn:hover, .action-btn.action-btn-big:hover {
  color: #fe8daa;
}

.action-btn.action-btn-big {
  color: #cdc2d0;
  font-size: 30px;
}

.music-info {
  background-color: rgba(255,255,255,0.5);
  border-radius: 15px 15px 0 0;
  position: absolute;
  width: calc(100% - 40px);
  padding: 10px 10px 10px 150px;
  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 h2 {
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
}

.progress-container {
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
  height: 4px;
  width: 100%;
}

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

NOTE: Link the CSS file to HTML using “<link rel=”stylesheet” href=”style.css” /> ” in HTML head section.

Step 3: Creating a JS file for detaling in music player.

Create a new file name script.js.

Open script.js and copy paste the below given code.

				
					const musicContainer = document.getElementById("music-container");
const playButton = document.getElementById("play");
const prevButton = document.getElementById("prev");
const nextButton = 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");

const songs = ["hey", "summer", "ukulele"];
let songIndex = 1;

function getSongTitle(song) {
  return song.charAt(0).toUpperCase() + song.slice(1);
}

function loadSong(song) {
  title.innerText = getSongTitle(song);
  audio.src = `https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/music/${song}.mp3?raw=true`;
  cover.src = `https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/${song}.jpg?raw=true`;
}

function playSong() {
  musicContainer.classList.add("play");
  playButton.querySelector("i.fas").classList.remove("fa-play");
  playButton.querySelector("i.fas").classList.add("fa-pause");
  audio.play();
}

function pauseSong() {
  musicContainer.classList.remove("play");
  playButton.querySelector("i.fas").classList.remove("fa-pause");
  playButton.querySelector("i.fas").classList.add("fa-play");
  audio.pause();
}

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

function nextSong() {
  songIndex++;
  if (songIndex > songs.length - 1) songIndex = 0;
  loadSong(songs[songIndex]);
  playSong();
}

function updateProgress(e) {
  const { duration, currentTime } = e.srcElement;
  const progressPercent = (currentTime / duration) * 100;
  progress.style.width = `${progressPercent}%`;
}

function setProgress(e) {
  const width = this.clientWidth;
  const clickX = e.offsetX;
  const duration = audio.duration;
  audio.currentTime = (clickX / width) * duration;
}

// Event Listeners
playButton.addEventListener("click", () => {
  const isPlaying = musicContainer.classList.contains("play");
  isPlaying ? pauseSong() : playSong();
});

prevButton.addEventListener("click", prevSong);
nextButton.addEventListener("click", nextSong);

audio.addEventListener("timeupdate", updateProgress);
progressContainer.addEventListener("click", setProgress);

audio.addEventListener("ended", nextSong);

// Init
loadSong(songs[songIndex]);

NOTE: Link the JS file to HTML using “<script src=”script.js”></script> ” in the end of HTML Body section section.

Conclusion:

Creating music palyer provides a powerful way to handle user input and interaction in web applications. With HTML, CSS and JavaScript declarative approach, managing form state and handling user events becomes more intuitive and efficient.

Remember, this is just a basic example. Depending on your project requirements, you might need to add validation, integrate with a backend service for form submission, or include additional features like dynamic form fields.

Feel free to experiment and expand upon this example to build more complex forms tailored to your specific needs. Happy coding!