Creating a music player with JavaScript

Question

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!!!????

I don't see anywhere that actually loads any media files. Which is reflected by the error you're getting. — Rick Calder, Nov 15 '18 at 23:52
Song.src is pointing at HTMLELEMENT object. The src is supposed to be filename. Unless the text content of div is filename — Edwin Dijas Chiwona, Nov 15 '18 at 23:53
Possible duplicate of [Play audio local file with html](https://stackoverflow.com/questions/38265242/play-audio-local-file-with-html) — , Nov 15 '18 at 23:55
`songs[currentSong]` is undefined, given that `songs` isn't an array holding local files but a `
` element. — , Nov 15 '18 at 23:57
first i have this error : index.html:94 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. and when i load music and click on it have this error : Uncaught (in promise) DOMException: Failed to load because no supported source was found. @RickCalder — hossein asghari, Nov 16 '18 at 00:01
I'd start by looking at the duplicate I linked, and at the live fiddle in the accepted answer that does exactly what you want to do. I also told you what the issue is: you're trying to play a `
`, which you don't even properly access. — , Nov 16 '18 at 00:30
You are trying to access a nodeElement like an array. Try filling your song urls in the array songs. — , Jan 31 '19 at 20:17

score 0 · Accepted Answer · 2019-02-01T01:05:08.133

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).

Creating a music player with JavaScript

1 Answers1