在ajax调用jplayer之后检索文件位置返回字符串

Question

i am building a mpe player for my production website, using the jplayer. the problem i have is i give my visitors the full song to listen to and for that reason i have to attempt to secure my music so heres the problem. jplayer requires a string that is a file location to the track that is to be played. i would like to make a ajax call and return that location. i tried to return a varible after a ajax call to be placed in the string location,but the code runs threw before the call is finish....

heres my code:

html markup:

<div id="player"></div>

        <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->

        <div id="jp_container" class="demo-container">

            <p>
                <div class="pro"></div>
                <span class="play-state"></span> : <span class="track-name">nothing</span><br />

                of <span class="jp-duration"></span>, which is
                <span class="jp-current-time"></span><br />
            </p>
            <ul class="toolbar ui-widget-header ui-corner-all">
                <li><button class="jp-Prev" href="#">Prev</button></li>
                <li><button class="jp-play" href="#">Play</button></li>
                <li><button class="jp-pause" href="#">Pause</button></li>
                <li><button class="jp-stop" href="#">Stop</button></li>
                <li><button class="jp-Next" href="#">Next</button></li>
                <li><button class="jp-mute" href="#">Mute</button></li>
                <li><button class="jp-unmute" href="#">Unmute</button></li>
                <li><div class="jp-volume-bar"></div></li>
            </ul>
            <ul class="playlist">
                <li><span>Select a track :</span></li>
                <? Beats(); ?>
            </ul>
        </div>

Jquery markup:

    $("#jp_container .track").on("click",function(event) {
        var x = $(this).attr('id');
        var mp3File = // maybe a function can go here
        my_jPlayer.jPlayer("setMedia", {
            mp3: //this is where the string is expected
        });
        my_jPlayer.jPlayer("play"); 
        my_trackName.text($(this).text());
        $(this).blur();
        return false;       
    });
// here is were i get the location in a function i workout already
function url(x){
    var mp3;
    $.ajax({
    type: "POST",
    url: "hosts/beats/beat.php",
    data: "<?=md5('url')?>="+x+"&ok=<?=md5(rand(1,20))?>",
    dataType: "html",
    success:function(data){ var mp3 = data; }   
        }); 
    return mp3; 
}

Answer 1

first "A" in AJAX is for ayshnchronous...you can't return mp3 from your function because the ajax hasn't completed when you try returning it.

You need to do the setMedia within success callback of ajax

$("#jp_container .track").on("click", function(event) {
    var x = $(this).attr('id');

    $.ajax({
        type: "POST",
        url: "hosts/beats/beat.php",
        data: "<?=md5('url')?>=" + x + "&ok=<?=md5(rand(1,20))?>",
        dataType: "html",
        success: function(data) {

            my_jPlayer.jPlayer("setMedia", {
                mp3: data
            });
            my_jPlayer.jPlayer("play");
            my_trackName.text($(this).text());
            $(this).blur();

        }
    });

    return false;
});