Ndtyjky

I am trying to create a music player .
my HTML code is :

<div id="main">

       <div id="list"  draggable="true">



       </div>



       <div id="player">

         <div id="buttons">



           <button id="pre" onclick="pre()"><img src="images/pre.png" height="90%" width="90%"></button>

           <button id="play" onclick="playAudio()"><img src="images/play.png" height="90%" width="90%"></button>

           <button id="next" onclick=" next()"><img src="images/next.png" height="90%" width="90%"></button>

           <input type="file" id="file" name="file" multiple ="multiple" style=" display : none ;">

           <button id="browse"><img src="images/browse.jpg" height="90%" width="90%"></button>

           <button id="unmute"><img src="images/unmute.png" height="90%" width="90%"></button>



         </div>

         <div id="seekbar">

           <div id="fill"></div>

           <div id="handle"></div>

         </div>

       </div>



     </div> 

And my JavaScrpit is :

// Browse button

      $("#browse").on("click", function() {

              $("input").trigger("click");

       });



    // Append the music   

      $("#file").change(function() {

      var result = $(this)[0].files;

      for(var i = 0 ; i< result.length ; i++){

       var file = result[i];

       // here are the files

         $("#list").append("<p id='first'>" + file.name + " (TYPE: " + file.type + ", SIZE: " + file.size + " ) </p>");  



    }

    });



    // play the music



    $("#list").on( "click" , "#first" , function(){

        console.log(song );



    });





var songs = document.getElementById("list") ;



var song = new Audio();

var currentSong = 0 ;



$("#list").on( "click" , "#first" , function(){

        playSong();

        });



 window.onload = playSong ;



function playSong(){ 

    song.src = songs[currentSong];



    song.play();

};

I want to append music to the (div with id = list) and then when i click on the music, play it but its not working and give me this error :: Uncaught (in promise) DOMException: Failed to load because no supported source was found.

can anyone help me!!!????

The best way to archive what you actually describe is to put your audio url's in an array. Like in the following piece of code:

let song_list = new Array(); // Contains Audio URLs 

let current_song = 0;

let player = new Audio();

player.src = song_list[current_song];



function playSong(){

    player.play();

}



function pauseSong(){

    player.pause();

}



function nextSong(){

    player.pause();

    player.src = song_list[++current_song];

    player.onload = ()=>{

          player.play(); 

    };

}

And keep in mind that autoplay won't work. You need at least an interaction with the website to actually hear the audio(at least on Google Chrome or to be more clear on all V8 running browsers).