playing songs with jplayer from mysql database using php and jquery ajax - php

Question

I am developing a music streaming site and I am using jplayer to play songs on my site. I customized jplayer to better suit my site.
I created a database for my site and now want to play songs from database by using jplayer.
since I only know little about php and mysql, I can't figure it out how to do that? some how I am able to play a random song from a msql table with jplayer
but I want to generate links of each mp3 file and echoed them in an html lists so when get clicked loaded into jplayer and playing! simple is that!
getsong.php
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
include_once "ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('root','','amr','localhost');
$song = $db->get_row("SELECT * FROM tracks ORDER BY RAND() LIMIT 1");
$artist = $song->album_id;
$songname = $song->name;
$track_url = $song->track_url;
$separator = '|';
echo $track_url.$separator.$artist.$separator.$songname;
}
?>
jplayer-interface.php
> <script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
var data = $.ajax({
url: "../js/getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
});
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
ended: function (event) {
var data = $.ajax({
url: "../js/getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
});
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
swfPath: "../js/jPlayer",
supplied: "mp3, ogv, m4v, oga",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false,
enableRemoveControls: false,
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
});
});
</script>
>
>
>
> <footer class="j-player">
<div id="jp_container_1">
<div class="jp-type-playlist">
<div class="playlist_items jp-playlist"><!--start jp-playlist-->
<ul>
<!-- The method Playlist.displayPlaylist() uses this
unordered list -->
<li> </li>
</ul>
</div><!--end jp-playlist-->
<div class="lyrics-contents jp-lyrics"><!--start jp-lyrics-->
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered
list -->
<li> </li>
</ul><!--end jp-lyrics-->
</div>
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div><div id="jquery_jplayer_1" class="jp-jplayer">
</div> <!--#jquery_jplayer_1--></div>
<div class="previous-button"><a class="jp-previous"><i
class="arcd-controller-jump-to-start"></i></a></div>
<div class="play-button">
<a class="jp-play"><i class="flaticon-play62"></i>
</a>
<a class="jp-pause hid"><i class="flaticon-pause35">
</i></a>
</div>
<div class="next-button"><a class="jp-next"><i
class="arcd-controller-next"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-
stop"></i></a></div>
<div class="jp-current-time"></div>
<div class="jp-progress hidden-692">
<ul class="jp-details">
<li class="jp-title" id="songname" aria-
label="title"> </li>
<li class="jp-artist" id="artist" aria-
label="artist"> </li>
</ul>
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-duration"></div>
<div class="volume-speaker">
<a class="jp-mute" title="mute"><i class="arcd-
music1432"></i></a>
<a class="jp-unmute hid" title="unmute"><i
class="arcd-mute10"></i></a>
</div>
<div class="jp-volume">
<div class="jp-volume-bar vol-bar-bg">
<div class="jp-volume-bar-value vol-bar-seek">
</div>
</div>
</div>
<div class="shuffle-button">
<a class="jp-shuffle" title="shuffle"><i
class="arcd-shuffle shuffle-on"></i></a>
<a class="jp-shuffle-off hid" title="shuffle off"><i
class="arcd-shuffle shuffle-off"></i></a>
</div>
<div class="repeat-button">
<a class="jp-repeat" title="repeat"><i class="arcd-
loop repeat-on"></i></a>
<a class="jp-repeat-off hid" title="repeat off"><i
class="arcd-loop repeat-off"></i></a>
</div>
<div class="playlist-button jp-toggles">
<a class="show-playlist" title="playlist-on"><i
class="arcd-lyrics1"></i></a>
</div>
<div class="lyrics-button">
<a class="jp-show-lyrics" title="Lyrics"><i
class="arcd-note25"></i></a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress"></i></a>
</div>
</div><!--/ .jp-controls1-->
</div><!--/ .jp-interface-->
</div><!--/ .jp-gui-->
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to
a recent version or update your <a
href="http://get.adobe.com/flashplayer/"
target="_blank">Flash plugin</a>.
</div>
</div><!--/ .jp-type-playlist-->
</div><!--/ .jp_container_1-->
</footer>
Any help will be really appreciated!