audio won't work on safari browser - html

Question

could someone please help me to find out why this won't work on safari browser? It seems to work really well in all other browsers apart from Safari. I really could not work it out.
Any help will be most appreciated.
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', 'http://radio-maghreb.net/radio/radio almazighia.png'];
urls[1] = ['http://mp3lg4.tdf-cdn.com/9077/jet_143651.mp3', "http://radio-maghreb.net/radio/alwatania.png"];
urls[2] = ['http://mp3lg4.tdf-cdn.com/9080/jet_144136.mp3', "http://radio-maghreb.net/radio/inter.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">
Play
Stop
</span>
Next Track
<!-- player ends -->
<br>
<br>
<!-- img links start -->
<div id="playerList">
</div>