CODEWITHSUNDEEP
jqueryhtmlaudiohandlebars.js
user2980869
user2980869

Reputation: 59

Audio Player to stop playing when new song is clicked

I am making a simple web audio player using jquery, handlebars, html5. My player works when the first link is clicked, but if another song link is clicked the original keeps playing and the only way to get it to play another song is to refresh the page. I'd like it to stop playing the initial song and start playing the new song that has been clicked. I tried to get it into a jsfiddle but couldn't get it all to work so I put it up online

Here

I know it looks awful now, I am just trying to get it to work before I go further with the design. Any help is appreciated. Thanks!

Upvotes: 0

Views: 473

Answers (2)

user2980869
user2980869

Reputation: 59

Finally found an answer to my own question. Two stupid lines of code. My downfall was not telling it to load it. 

 audioPlayerDiv.src=songInfo.source;
 audioPlayerDiv.load();

Upvotes: 1

NorCalKnockOut
NorCalKnockOut

Reputation: 878

You should be changing the src when a new song is clicked:
Give the source tag an id.
<source src="media/1.mp3" type="audio/wav" id="audioSource">

function change(songURL) { //called when a song link is clicked.
  var player = document.getElementById("audioPlayer");
  var source = document.getElementById("audioSource");

  if(source.src != songURL) {
    //set the players src to the new song
    source.src = songURL;
    player.load();
    player.play();
  }
}

Something like that

Upvotes: 0

Related Questions