Html5 audio playlist not working on the Safari

I wonder if any one can help me sort this problem. My audio playlist is working fine in chrome , ie , and firefox but NOT Safari browser.

I tried using it on iphone safari browser and it works but Not on full screen.

It will be great if some one can help.

Here is my code:

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://ift.tt/1tr9ENU', 'radio/radio almazighia.png'];
    urls[1] = ['http://ift.tt/1CFwPY4', "radio/alwatania.png"];
    urls[2] = ['http://ift.tt/1zj92pF', "radio/inter.jpg"];
    urls[3] = ['http://ift.tt/1Bp6YOu', "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: #eee;
                }

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