Soundmanager 360Ui doesn't initialized sometimes after refresh page

Im trying to initialize a 360Ui audio player with soundmanager 2. In the first page load, players appeared as it was expected. Then if i refresh the page with Ctrl+R or By clicking on the refresh button soundmanager seems not to be initialized.

I have create these divs:

<div id="pl1" class="ui360" >
    <a id="a1" href="#"></a>
</div>

<div id="pl2" class="ui360">
    <a id="a2" href="#"></a>
</div>

<div id="pl3" class="ui360">
    <a id="a3" href="3"></a>
</div>

and on the main.js when the page being loaded this code will be executed.

$(function(){
     $('#designed-by,#pl1,#pl2,#pl3').hide();
     // Loading audio players.
     loadpls();
     soundManager.setup({url:'../audioPlayer/soundmanager/swf'});
});

Also here is the loadpls() function:

function loadpls(){
    // Loading audio players
    $.ajax({
        url: '../admin/classes/classController.php',
        type: 'POST',
        data: {method:'loadAudioPl'},
        dataType: 'json',
        error: function(jqXHR, error, errorThrown){console.log(jqXHR+" "+error+" "+errorThrown);},
        success: function(json){
            if(json.status == 1){
                if(json.url1 != ''){
                    $('#a1').attr("href", json.url1);
                    $('#pl1' ).offset({top: json.y1, left: json.x1});
                    $('#pl1').show();
                }

                if(json.url2 != ''){
                    $('#a2').attr("href", json.url2);
                    $('#pl2' ).offset({top: json.y2, left: json.x2});
                    $('#pl2').show();
                }

                if(json.url3 != ''){
                    $('#a3').attr("href", json.url3);
                    $('#pl3' ).offset({top: json.y3, left: json.x3});
                    $('#pl3').show();
                }             
           }
        }
    });

}

Ok. Lets suppose now that its the first time that we visit the page. And we make an 'inspect element' in player's icon. We could see that the soundmanager initialized successfully by seeing the code above:

<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
<div class="sm2-360ui">
<canvas class="sm2-canvas" width="50" height="50"></canvas> 
<span class="sm2-360btn sm2-360btn-default"></span> 
<div class="sm2-timing alignTweak"></div> 
<div class="sm2-cover"></div>
</div><a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3" class="sm2_link"></a>
</div>

There are times that if we refresh that page, the audio player disappear and now the results of the 'inspect element' somewhere in the page show us this:

<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
    <a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3"></a>
</div>

I translate that behavior as a non initialation of soundmanager but i cannot explain it further more. Also, something else that i considered is that if i let the console (Ctrl+Shift+I) open, the player appeared more times after the refresh.

Solution

So finally it seems that i fixed it. Here is how.

There was indeed a problem with initialization of soundmanager and probably because i used such a code :

<div id="pl1" class="ui360" >
  <a id="a1" href="#"></a>
</div>

The problem here is that in href="" attribute there is no .mp3 extension file and thats why soundmanager couldn't initialized. So by changing that code into the above one, without test.mp3 exist, seems to work as expected.

<div id="pl1" class="ui360" >
    <a id="a1" href="test.mp3"></a>
</div>