DOMException: Failed to load because no supported source was found in html file

Question

im getting DOMException: Failed to load because no supported source was found in audio.play(). im getting his issue on audioElement.src = 'songs/${index+1}.mp3' ;

    console.log("Welcome to music player");
//initialize the Variables


let songIndex = 0;




 audioElement = new Audio("songs/1.mp3");


let masterPlay = document.getElementById('masterPlay');

let myProgressBar = document.getElementById('myProgressBar');

let gif = document.getElementById('gif');


let masterSongName = document.getElementById('masterSongName');

let songItem = Array.from(document.getElementsByClassName('songItem'));



 songs = [
    { songName: "closer - chainsmokers", filePath: "songs/1.mp3", coverPath: "1.jpg" },

    { songName: "a thousand years", filePath: "songs/2.mp3", coverPath: "2.jpg" },

    { songName: "Let me love you", filePath: "songs/3.mp3", coverPath: "3.jpg" },

    { songName: "someone you loved", filePath: "songs/4.mp3", coverPath: "4.jpg" },

    { songName: "Let me down slowly", filePath: "songs/5.mp3", coverPath: "1.jpg" },

    { songName: "stay - Justin beiber", filePath: "songs/6.mp3", coverPath: "1.jpg" },


]




  songItem.forEach((element,i) => {

   
      element.getElementsByTagName("img")[0].src=songs[i].coverPath;

      element.getElementsByClassName("songName")[0].innerText=songs[i].songName;
  
  })







masterPlay.addEventListener('click', () => {

    if (audioElement.paused || audioElement.currentTime <= 0) {

        audioElement.play();

        masterPlay.classList.remove('fa-play-circle')

        masterPlay.classList.add('fa-pause-circle')

        gif.style.opacity = 1;

    }

     else {
        audioElement.pause();

        masterPlay.classList.remove('fa-pause-circle');

        masterPlay.classList.add('fa-play-circle');

        gif.style.opacity = 0;
    }
})





audioElement.addEventListener('timeupdate',()=>{

    console.log('timeupdate'); 

      progress = parseInt((audioElement.currentTime/audioElement.duration)*100);

  
    myProgressBar.value=progress;
})

myProgressBar.addEventListener('change',()=>{

   audioElement.currentTime  = myProgressBar.value * audioElement.duration/100;
})

const makeAllPlays = ()=>{

    Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{

        element.classList.remove('fa-pause-circle');

        element.classList.add('fa-play-circle');
    })
}



Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=> {

    element.addEventListener('click',(e)=>{

        console.log(e.target);

        makeAllPlays();

      index = parseInt(e.target.id);

        e.target.classList.remove('fa-play-circle');

        e.target.classList.add('fa-pause-circle');

   audioElement.src = 'songs/${index+1}.mp3' ; // error generating on this line
   
   
   masterSongName.innerText=songs[songIndex].songName;

   audioElement.currentTime=0;

   audioElement.play();
   
   masterPlay.classList.remove('fa-pause-circle');

   masterPlay.classList.add('fa-play-circle');

 } )

})



document.getElementById('next').addEventListener('click',()=>{

if(songIndex>5){

    songIndex=0;

}

else{

    songIndex+=1;
}



audioElement.src = 'songs/${index}.mp3';

masterSongName.innerText=songs[songIndex].songName;

audioElement.currentTime=0;

audioElement.play();

masterPlay.classList.remove('fa-pause-circle');

masterPlay.classList.add('fa-play-circle');

})





document.getElementById('previous').addEventListener('click',()=>{

if(songIndex<=0){

    songIndex=0;
}
else{

    songIndex-=1;
}

audioElement.src = 'songs/${index}.mp3';

masterSongName.innerText=songs[songIndex].songName;

audioElement.currentTime=0;

audioElement.play();

masterPlay.classList.remove('fa-pause-circle');

masterPlay.classList.add('fa-play-circle');

})

Answer 1

template string needs backtick ` to work properly, you are using single quote '

change

audioElement.src='songs/${songIndex+1}.mp3'

with

audioElement.src=`songs/${songIndex+1}.mp3` 

MDN docs