Using jquery to design a simple example of a web music player sharing _jquery

I. Preparation of the database
First, we design the MySQL database as follows:

CREATE TABLE ' songs ' (
 ' song_id ' int (one) not null auto_increment,
 ' url ' varchar (+) NOT null,
 ' artist ' Varch AR (NOT null,
 ' title ' varchar (+) NOT NULL,
 PRIMARY KEY (' song_id ')
) Engine=myisam DEFAULT charset= Latin1 auto_increment=2;

Here, the URL field represents the MP3 music store address, artist is the singer of the song, title is the name of the song. We'll add some sample data, as follows:

INSERT into ' songs ' (' song_id ', ' URLs ', ' Artist ', ' title ') VALUES (', ' Http://mysongs.com/songurl.mp3 ', ' Artist name ', ' so ng name ');
INSERT into ' songs ' (' song_id ', ' url ', ' Artist ', ' title ') VALUES (', ' Http://mysongs.com/anothersongurl.mp3 ', ' Another a ') Rtist ', ' Another song ');
INSERT into ' songs ' (' song_id ', ' URLs ', ' Artist ', ' title ') VALUES (', ' Http://mysongs.com/onemoresongurl.mp3 ', ' one more a Rtist ', ' One more song ');

two, design HTML page
after the database is designed, we can start designing the HTML page. Here we first download jquery's one music playback plugin jplayer (http://jplayer.org/). After the download of the package uncompressed, JS and skin Two folder content in your application root directory, they are to use JavaScript files and CSS style application files. Now you can start designing the HTML page, name the file demo.html, and the code is as follows:

<! DOCTYPE HTML Public '-//w3c//dtd XHTML 1.0 transitional//en ' Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ' >  

The above code is actually very simple, just introduce the necessary files and styles for the jquery and Jplayer Plug-ins, and then set the appearance of the player, where you can use the div to advance the specified layer, such as playing the progress bar, playing the button (start/pause), the sound control size, and so on.

Third, read the tracks in the database
Next, we can read from the database to play the song, this article will use ezsql PHP open Source Library to connect the database, of course, you can also use the traditional MySQL connection method. Ezsql the specific usage we no longer introduce too much, here use is actually very simple, put ez_sql_core.php and Ez_sql_ mysql.php two files into the root directory of the project, we write PHP file as follows, named Getsong.php, the code is as follows:

<?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 (' Db_user ', ' Db_password ', ' db_name ', ' db_host '); 

  $song = $db->get_row ("select * from Songs order by RAND () LIMIT 1");

  $artist = $song->artist;
  $songname = $song->title;
  $url = $song->url;
  $separator = ' | ';
  echo $url. $separator. $artist. $separator. $songname; 

>

  Here, with Rand () randomly take a record (track) in MySQL, and then save the name, singer name, and address of the song with a variable, using the symbol "|" Connect them. And because we're going to use Ajax to invoke this PHP, note the statement:
if (!empty ($_server[' Http_x_requested_with ')) && strtolower ($_server[' Http_x_requested_with '] = = ' XMLHttpRequest ')
  The main purpose is to prevent users from entering the browser address bar just for example http://www.yousite.com/ Getsong.php can obtain the URL address of the song, only to be accepted by a request made by Ajax.
Four, finally implement perfect code
Finally, we can modify the Jplayer code, let our players run, modify the demo.html code as follows:

 <script type= "Text/javascript" >//<![ cdata[$ (document). Ready (function () {$ ("#jquery_jplayer_1"). Jplayer ({ready:function () {var data = $.ajax ( {URL: "getsong.php", Async:false}).

      ResponseText;
      var string = data.split (' | ');

      $ (this). Jplayer (' Setmedia ', {mp3:string[0]}). Jplayer ("Play");
      $ (' #artist '). html (string[1]);
    $ (' #songname '). html (string[2]); Ended:function (event) {var data = $.ajax ({url: "getsong.php", Async:false}). respon

      Setext;
      var string = data.split (' | ');

      $ (this). Jplayer (' Setmedia ', {mp3:string[0]}). Jplayer ("Play");
      $ (' #artist '). html (string[1]);
    $ (' #songname '). html (string[2]);
}, Swfpath: "JS", Supplied: "MP3"});
}); ]]> </script> 

As you can see, in the Ready method of the Jplayer plug-in, an AJAX request was launched, requesting getsong.php to randomly get a song to play and then splitting the returned data with the Split method "|" symbols, which derive the string array string[0] that is the URL address for the mp3 song, stringp[1] for the singer's name, here through
$ (' #artist '). html (string[1]) is displayed, $ (' #songname '). html (string[2]) shows the name of the song. Swfpath specifies that the player's Flash directory is a JS directory, of course you can define your own path, supplied that only support MP3 format.
After running, you can see the effects of the following players: