text: // Check the Audio API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
  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 array
  const songs = ['blue-reeves', 'slow-snow', 'the-roads'];
  //Keep track of song 
  let songIndex = 2;
  //Initially load song details into DOM
  loadSong(songs[songIndex])
  //Update song details
  function loadSong(song) {
    title.innerText = song
    audio.src = `../assets/audio/${song}.mp3`
    cover.src = `../assets/images/${song}.jpg`
  }
  // Play song 
  function playSong() {
    musicContainer.classList.add('play')
    playBtn.querySelector('i.fas').classList.remove('fa-play')
    playBtn.querySelector('i.fas').classList.add('fa-pause')
    audio.play()
  }
  // Pause song 
  function pauseSong() {
    musicContainer.classList.remove('play')
    playBtn.querySelector('i.fas').classList.add('fa-play')
    playBtn.querySelector('i.fas').classList.remove('fa-pause')
    audio.pause()
  }
  // Prev 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 bar
  function setProgress(e) {
    const width = this.clientWidth
    const clickX = e.offsetX
    const duration = audio.duration
    audio.currentTime = (clickX / width) * duration
  }
  //Event listener 
  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 event
  audio.addEventListener('timeupdate', updateProgress)
  // Click on progress bar
  progressContainer.addEventListener('click', setProgress)
  // Song end
  audio.addEventListener('ended', nextSong)
  /**
   * 
   */