Trendb

Music Player Using HTML, CSS and JavaScript (source code)

Step 1: HTML Structure

Step 2: CSS Styling

Step 3: JavaScript Logic

// script.js

const audio = document.getElementById('audio');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const volumeControl = document.getElementById('volumeControl');
const currentTimeLabel = document.getElementById('currentTime');
const durationLabel = document.getElementById('duration');

// Play/Pause button functionality
playPauseBtn.addEventListener('click', function () {
  if (audio.paused) {
    audio.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    audio.pause();
    playPauseBtn.textContent = 'Play';
  }
});

// Update progress bar and current time
audio.addEventListener('timeupdate', function () {
  const currentTime = audio.currentTime;
  const duration = audio.duration;

// Update progress bar
  progressBar.value = (currentTime / duration) * 100;

// Update current time display
  currentTimeLabel.textContent = formatTime(currentTime);
  durationLabel.textContent = formatTime(duration);
});

// Sync progress bar with current time
progressBar.addEventListener('input', function () {
  const seekTo = (progressBar.value / 100) * audio.duration;
  audio.currentTime = seekTo;
});

// Volume control
volumeControl.addEventListener('input', function () {
  audio.volume = volumeControl.value / 100;
});

// Format time in mm:ss format
function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${minutes}:${secs < 10 ? '0' + secs : secs}`;
}

// Set initial duration label
audio.addEventListener('loadedmetadata', function () {
  durationLabel.textContent = formatTime(audio.duration);
});

Step 4: Add Your Audio File

Ensure that the file name in the audio tag (your-audio-file.mp3) points to the actual location of your audio file. You can also use an online URL to stream music.

With this code, you can create Music Player Using HTML, CSS and JavaScript to fit your needs.

Music Player Using HTML, CSS and JavaScript (source code)

Step 1: HTML Structure

Step 2: CSS Styling

Step 3: JavaScript Logic

Step 4: Add Your Audio File

What is the purpose of this website?