JavaScript audio multi track player

	function loadPlayer() 
	{
        var audioPlayer = new Audio();
        audioPlayer.controls="";
		audioPlayer.setAttribute("data-index", -1); //set default index to -1.
        audioPlayer.addEventListener('ended',nextSong,false);
        audioPlayer.addEventListener('error',errorFallback,true);
        document.getElementById("player").appendChild(audioPlayer);
    }
	
	
    function nextSong(index, e) 
	{
		var next;
		var audioPlayer = document.getElementsByTagName('audio')[0];
		//check for index. If so load from index. If not, index is defined auto iterate to next value.
		if (index >= 0)
		{
			next = index;
		}
		else
		{
			next = parseInt(audioPlayer.getAttribute("data-index"))+1;
			next >= urls.length ? next = 0 : null;
		}

		audioPlayer.src=urls[next][0]; //load the url.
		audioPlayer.setAttribute("data-index", next);
		//disable the player.
		var audioPlayerControls = document.getElementById("playerControls");
		audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
		audioPlayerControls.setAttribute("disabled", true);
		audioPlayer.addEventListener('canplay',enablePlayerControls,false);
		audioPlayer.load();
		
		//show the image:
		var image = document.getElementById("playerList").querySelectorAll("a")[next].querySelector("img").cloneNode();
		image.style.width = "30px";
		if(audioPlayerControls.querySelector("img"))
		{
			audioPlayerControls.replaceChild(image, audioPlayerControls.querySelector("img"));
		}
		else
		{
			audioPlayerControls.insertBefore(image, audioPlayerControls.querySelector("a"));
		}
		
    }
	
	function enablePlayerControls()
	{
		//File has loaded, so we can start playing the audio. 
		//Enable the player options.
		var audioPlayer = document.getElementsByTagName('audio')[0];
		audioPlayer.removeEventListener('canplay',enablePlayerControls,false);
		document.getElementById("playerControls").removeAttribute("disabled");
		audioPlayer.play();
	}
	
    function errorFallback() {
        nextSong();
    }
	
	
    function playPause() 
	{
        var audioPlayer = document.getElementsByTagName('audio')[0];
		if (audioPlayer.paused) 
		{
			audioPlayer.play();
		} else 
		{
			audioPlayer.pause();
		}
    }
    function pickSong(e) 
	{
		//we want the correct target. Select it via the event (e).
		var target;
		
		//pickSong does the selecting:
		if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() == "img")
		{
        //The event target = the img element.
			target = e.target.parentElement;
		}
		else
		{
			//the event target is the a element
			target = e.target;
		}
		var index = target.getAttribute("data-index"); //get the song index stored in the data-index attribute.
        nextSong(index);
    }
 
    var urls = new Array();
    urls[0] = ['http://mp3lg4.tdf-cdn.com/9079/jet_143844.mp3', 'radio/radio almazighia.png'];
    urls[1] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "radio/alwatania.png"];
    urls[2] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "radio/inter.jpg"];
    urls[3] = ['http://francemaghreb2.ice.infomaniak.ch:80/francemaghreb2-high.mp3', "radio/france maghrib.jpg"];

	function startAudioPlayer()
	{
		loadPlayer();
		for (var i = 0; i < urls.length; ++i)
		{
			//this for loop runs through all urls and appends them to the player list. This smooths the adding off new items. You only have
			//to declare them in the array, the script does the rest.
			var link = document.createElement("a");
			link.href = "javascript: void(0)";
			link.addEventListener("click", pickSong, false);
			link.setAttribute("data-index", i);
			link.img = document.createElement("img");
			link.img.src = urls[i][1];
			link.appendChild(link.img);
			document.getElementById("playerList").appendChild(link);
		}
	}	
	
    //Event that starts the audio player.
	window.addEventListener("load", startAudioPlayer, false);

		#playerControls[disabled=true] > a{
			color: #c3c3c3;
		}

<span id="playerControls" disabled="true">
	<a href="javascript: void(0);" onclick="playPause()" id="player" title="Play">Play</a>
	<a href="javascript: void(0);" onclick="playPause()" id="player" title="Stop">Stop</a>
</span>
	<a href="javascript: void(0);" onclick="nextSong()" id="player" title="Next Station">Next Track</a>

<!-- player ends -->

<br>
<br>
<!-- img links start -->

<div id="playerList">

</div>