How can I link different MP3 files from an <ul> playlist to the same <audio> tag?

Question

I found a good tutorial on how to build a playlist with HTML 5 <audio> tag and JavaScript ( http://blog.lastrose.com/html5-audio-video-playlist/ ).

But when I copy that code into my site, it simply doesn't work well, as every element of the playlist (if clicked) launch a new audio player in a new page instead of being played by the same player above the playlist.

How can I link different MP3 files from an <ul> playlist to the same <audio> tag?

This is my code

 var video_player = document.getElementById("video_player"); var links = video_player.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = handler; } function handler(e) { e.preventDefault(); videotarget = this.getAttribute("href"); filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; video = document.querySelector("#video_player video"); video.removeAttribute("controls"); video.removeAttribute("poster"); source = document.querySelectorAll("#video_player video source"); source[0].src = filename + ".mp4"; source[1].src = filename + ".webm"; video.load(); video.play(); } 

 <audio controls id="player"> <source src="01 Scusate.mp3" type="audio/mp3"> <source src="22 Gli affitti.mp3" type="audio/mp3"> </audio> <ul id="playlist"> <li class="playlist"><a href="01 Scusate.mp3" class="p">Scusate - Gino Negri performer</a></li> <li class="playlist"><a href="22 Gli affitti.mp3" class="p">Gli affitti - Sandro Massimini</a></li> </ul> 

I'd be very grateful to anybody who is able to find the mistake in JavaScript and suggest me a solution.

Answer 1

I have this functionality on our band's page.

Here's how I did it:

/* HTML5 player */
$('#playlist li').on('click', pickSong);

var pickSong = function(ev){
var item = ev.target;
var audio = $("audio")[0];
var pad = 'muziek\\';
audio.pause();
$('#mp3src').attr('src', '').attr('src', pad.concat(item.getAttribute('data-val'),'.mp3'));
$('#oggsrc').attr('src', '').attr('src', pad.concat(item.getAttribute('data-val'),'.ogg'));
audio.load();
audio.play();

$('#playlist li').removeClass('plays');
$(item).addClass('plays');

}

This is in the HTML:

<audio controls preload="none">
    <source id="mp3src" src="muziek/friend.mp3" type="audio/mp3">
    <source id="oggsrc" src="muziek/friend.ogg" type="audio/ogg">
</audio>
<ul id="playlist">
    <li class="plays" data-val="friend"></li>
    <li data-val="mercy"></li>
    <li data-val="anouk"></li>
    <li data-val="tmyfml"></li>
    <li data-val="krezip"></li>
</ul>

Answer 2

There are some difference with your code. Put one file in audio tag as jsfiddler example and the other file on tag as the example. Try to past the example in you code and try it. Then, if works, adpt for you needs ( http://blog.lastrose.com/html5-audio-video-playlist/ )