Home > Developer > JavaScript
Use jQuery to design a simple web music player instance sharing, jquery music player
I. Prepare a database
First, we design the MYSQL database as follows:
CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
Here, the url field indicates the address where mp3 music is stored, artist is the Song artist, and title is the song name. Let's add some sample data, as shown below:
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/songurl.mp3', 'Artist name', 'Song name');INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/anothersongurl.mp3', 'Another artist', 'Another song');INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/onemoresongurl.mp3', 'One more artist', 'One more song');
2. Design HTML pages
After designing the database, we can design the HTML page. Here we first need to download a music player plug-in jPlayer (http://jplayer.org/) for jQuery /). Decompress the downloaded package and put the content of the js and skin folders under the root directory of your application. They are the javascript files and CSS style application files to be used. Now you can open the HTML page and name it demo.html. 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. It just introduces the necessary files and styles for jQuery and jPlayer plug-ins, and then sets the appearance of the player. Here we use DIV to pre-locate the specified layer, for example, the playback progress bar, the playing button (start/pause), and the sound control size.
3. Read Database tracks
Next, we can read the songs to be played from the database. This article will use the PHP open source library of ezSQL to connect to the database. Of course, you can also use the traditional MYSQL connection method. The specific usage of ezSQL is not described too much. It is actually very simple to use here. Put the ez_ SQL _core.php and ez_ SQL _mysql.php files under the root directory of the project. We can compile the PHP file as follows and name it getsong. php code:<?phpif(!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, we use rand () to randomly retrieve a record (track) in MYSQL, and then use variables to save the name, artist name, and address of the song, respectively, connect them with the symbol "|. Because we need to use ajax to call this PHP, pay attention to 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 only.
4. complete code
Finally, we can modify the jplayercode so that our website can run. The demo.html code is modified 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 }).responseText; 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 is initiated to request getsong. php, randomly obtain a played song, and then use the split method to separate the returned data with the "|" symbol, the string [0] is the URL address of the mp3 song, And stringp [1] is the name of the singer.
Articles you may be interested in:
When ('{artist'{.html (string [1]) is displayed, then ('{songname'{.html (string [2]) is displayed with the name of the song. SwfPath specifies the directory where the FLASH of the player is located as the js directory. Of course, you can define the path by yourself. supplied indicates that only the MP3 format is supported.
After running the player, you can see the following effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
