title: Uncaught (in promise): Failed to load because no supported source was found during running JS file
body: <p>Im getting DOMException: Failed to load because no supported source was found in audio.play(). Im getting his issue on  line audioElement.src = <code>songs/${index}.mp3</code> ;</p>
  <pre><code>console.log(&quot;welcome To Spotify&quot;)
  //initializing variable
  let songIndex = 0;
  let audioElement = new Audio('songs/Toofan.mp3');
  let masterPlay = document.getElementById('masterPlay');
  let myProgressBar = document.getElementById('myProgressBar');
  
  let gif = document.getElementById('gif');
  let songItems = Array.from(document.getElementsByClassName('songItem'))
  
  let songs = [
      { songName: &quot;Toofan Toofan&quot;, filePath: &quot;songs/Toofan.mp3&quot;, coverPath: &quot;cover/toofan11.jpg&quot; },
      { songName: &quot;Laa Laa Bheemla&quot;, filePath: &quot;songs/Lala Bheemla.mp3&quot;, coverPath: &quot;cover/b3.jpg&quot; },
      { songName: &quot;Kalaavati&quot;, filePath: &quot;songs/Kalaavathi.mp3&quot;, coverPath: &quot;cover/s11.jpg&quot; },
      { songName: &quot;Bheemla Nayak Title song&quot;, filePath: &quot;songs/Bheemla Nayak.mp3&quot;, coverPath: &quot;cover/b2.jpg&quot; },
      { songName: &quot;Frozen Circles Bob&quot;, filePath: &quot;songs/Frozen Circles Bob ! Frozen ! Circles Bob.mp3&quot;, coverPath: &quot;cover/ehbidda.jpg&quot; },
      
  ]
  songItems.forEach((element,i)=&gt;{
     
      element.getElementsByTagName(&quot;img&quot;)[0].src = songs[i].coverPath
      element.getElementsByClassName(&quot;songName&quot;)[0].innerText = songs[i].songName;
  })
  
  //audioEvent.play();
  //handle play/pause
  masterPlay.addEventListener('click', () =&gt; {
      if (audioElement.paused || audioElement.currentTime &lt;= 0) {
          audioElement.play()
          masterPlay.classList.remove(&quot;fa-play-circle&quot;);
          masterPlay.classList.add(&quot;fa-pause-circle&quot;);
          gif.style.opacity = 1
      }
      else {
          audioElement.pause();
          masterPlay.classList.remove(&quot;fa-pause-circle&quot;);
          masterPlay.classList.add(&quot;fa-play-circle&quot;);
          gif.style.opacity = 0
      }
  
  })
  audioElement.addEventListener('timeupdate', () =&gt; {
      
      //updating seekbar
      progress = parseInt((audioElement.currentTime/audioElement.duration)* 100);
    
      myProgressBar.value=progress;
  })
  myProgressBar.addEventListener('change',  ()=&gt;{
      audioElement.currentTime=myProgressBar.value*audioElement.duration/100;
  
  })
  const makeAllPlays= () =&gt;{
      Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=&gt;{
          element.classList.remove('fa-pause-circle');
          element.classList.add('fa-play-circle');
      })
  
  }
  
  Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=&gt;{
      element.addEventListener('click', (e)=&gt;{
       makeAllPlays();
       index = parseInt(e.target.id);
       e.target.classList.remove('fa-play-circle');
       e.target.classList.remove('fa-play-circle');
       e.target.classList.remove('fa-play-circle');
          e.target.classList.add('fa-pause-circle');
         audioElement.src= `songs/${index}.mp3`;
          audioElement.currentTime=0;
          audioElement.play();
         masterPlay.classList.remove('fa-play-circle');
         masterPlay.classList.add('fa-pause-circle');
  
  
  })
  })
  
  </code></pre>