Music Player Interface

A frequent mistake in music player projects is updating the button text, progress bar, or track title manually without checking the real state of the audio element. This can make the interface say "Playing" while the audio is paused, or show the wrong active track after a user changes songs quickly.

Problematic approach:

      playButton.addEventListener('click', () => {
        playButton.textContent = 'Pause';
        audio.play();
      });

This code assumes playback always starts successfully. In real browsers, playback can fail because of autoplay restrictions, missing files, loading problems, or user interaction timing.

Better approach:

      async function playTrack() {
        try {
          await audio.play();
          player.classList.add('is-playing');
          playButton.textContent = 'Pause';
        } catch (error) {
          player.classList.remove('is-playing');
          playButton.textContent = 'Play';
          console.error('Playback failed:', error);
        }
      }

      function pauseTrack() {
        audio.pause();
        player.classList.remove('is-playing');
        playButton.textContent = 'Play';
      }

Pay attention to: Let the audio element drive the player state. Use events such as play, pause, ended, loadedmetadata, and timeupdate to keep the interface synchronized with real playback instead of assuming every action succeeds.

Beginners often try to display the total track duration immediately after setting the audio source. At that moment, the browser may not know the file duration yet, so the UI can show NaN:NaN, 0:00, or an incorrect value.

Problematic code:

      audio.src = currentTrack.src;
      durationLabel.textContent = formatTime(audio.duration);

The duration value is only reliable after the media metadata has loaded.

Recommended solution:

      audio.addEventListener('loadedmetadata', () => {
        durationLabel.textContent = formatTime(audio.duration);
        progressBar.max = Math.floor(audio.duration);
      });

Safe time formatter:

      function formatTime(seconds) {
        if (!Number.isFinite(seconds)) return '0:00';

        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = Math.floor(seconds % 60)
          .toString()
          .padStart(2, '0');

        return `${minutes}:${remainingSeconds}`;
      }

Pay attention to: Always update total duration inside loadedmetadata. Also make your time formatter defensive, because media values can briefly be NaN, Infinity, or unavailable while the browser is loading the file.

Some music player interfaces show a moving progress bar but do not let users jump to another part of the track. This makes the player feel unfinished. A real progress bar should both display playback progress and allow seeking.

Display-only progress:

      audio.addEventListener('timeupdate', () => {
        progressBar.value = audio.currentTime;
      });

This updates the bar visually, but the user cannot control playback position.

Better implementation:

      audio.addEventListener('timeupdate', () => {
        progressBar.value = Math.floor(audio.currentTime);
        currentTimeLabel.textContent = formatTime(audio.currentTime);
      });

      progressBar.addEventListener('input', () => {
        audio.currentTime = Number(progressBar.value);
        currentTimeLabel.textContent = formatTime(audio.currentTime);
      });

Pay attention to: Use an input type="range" for the timeline so users can seek with mouse, touch, and keyboard. Keep elapsed time and progress value updated from the same source: audio.currentTime.

Track switching is where many beginner music players break. If you update only the audio source but forget to reset progress, active playlist state, duration, or current time labels, the UI briefly shows information from the previous song.

Incomplete track change:

      function loadTrack(index) {
        currentTrackIndex = index;
        audio.src = tracks[index].src;
        trackTitle.textContent = tracks[index].title;
      }

This changes the song, but it does not reset the timeline or update the active playlist item.

Improved track loading:

      function loadTrack(index) {
        currentTrackIndex = index;
        const track = tracks[currentTrackIndex];

        audio.src = track.src;
        trackTitle.textContent = track.title;
        trackArtist.textContent = track.artist;

        progressBar.value = 0;
        currentTimeLabel.textContent = '0:00';
        durationLabel.textContent = '0:00';

        updateActivePlaylistItem();
      }

Playlist highlight example:

      function updateActivePlaylistItem() {
        playlistItems.forEach((item, index) => {
          item.classList.toggle('is-active', index === currentTrackIndex);
        });
      }

Pay attention to: Track loading should be a single controlled function. Every time the track changes, update audio source, metadata, progress, labels, and playlist highlight together. This prevents UI desynchronization.

A real music player should know what happens when a track finishes. Beginners often implement next and previous buttons but forget the ended event, so playback stops silently while the interface still looks active.

Missing behavior:

      // No ended event handler
      // The UI does not know what to do when the song finishes.

Better approach:

      audio.addEventListener('ended', () => {
        playNextTrack();
      });

      function playNextTrack() {
        const nextIndex = (currentTrackIndex + 1) % tracks.length;

        loadTrack(nextIndex);
        playTrack();
      }

Pay attention to: Decide what should happen after a track ends. You can auto-play the next track, stop playback, repeat the same track, or respect a repeat/shuffle setting. The important thing is to make the behavior intentional and visible in the UI.

Volume logic seems simple, but it often becomes inconsistent. A common bug happens when mute sets volume to 0, and unmute restores a random default instead of the user's previous volume.

Problematic mute logic:

      muteButton.addEventListener('click', () => {
        audio.volume = 0;
      });

This mutes the audio but does not remember the old volume.

Better volume state:

      let previousVolume = 0.8;
      audio.volume = previousVolume;

      volumeSlider.addEventListener('input', () => {
        const value = Number(volumeSlider.value);

        audio.volume = value;
        audio.muted = value === 0;

        if (value > 0) {
          previousVolume = value;
        }
      });

      muteButton.addEventListener('click', () => {
        if (audio.muted || audio.volume === 0) {
          audio.muted = false;
          audio.volume = previousVolume;
          volumeSlider.value = previousVolume;
        } else {
          audio.muted = true;
          volumeSlider.value = 0;
        }
      });

Pay attention to: Keep volume, muted state, and slider value synchronized. A good player restores the user's last meaningful volume instead of forcing them to adjust it again after unmuting.