An example of designing a simple web music player using jQuery

An example of designing a simple web music player using jQuery_jquery

WBOY

Release： 2016-05-16 15:11:37

Original

1320 people have browsed it

1. Prepare the 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 ;

Copy after login

Here, the url field represents the storage address of the mp3 music, artist is the singer of the song, and title is the name of the song. Let’s add some sample data, as follows:

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');

Copy after login

2. Design HTML page
After completing the design of the database, we can start designing the HTML page. Here we first need to download jPlayer (http://jplayer.org/), a music playback plug-in for jQuery. After unzipping the downloaded package, put the contents of the js and skin folders into the root directory of your application. They are the javascript files and CSS style application files to be used. 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'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
  <title>Online radio using jQuery</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
</head>

<body>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-audio">
      <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
          <ul class="jp-controls">
            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
          </ul>

          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>

          <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
          </div>

          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
        </div>

        <div id="jp_playlist_1" class="jp-playlist">
          <ul>
            <li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Copy after login

The above code is actually very simple. It just introduces the necessary files and styles of jQuery and jPlayer plug-ins, and then sets the appearance of the player. Here, DIV is used to pre-position the specified layer, such as the playback progress bar. Play button (start/pause), sound control volume, etc.

3. Read the tracks in the database
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. We won’t introduce the specific usage of ezSQL in too much. The usage here is actually very simple. Just put the two files ez_sql_core.php and ez_sql_mysql.php in the root directory of the project. We write the php file as follows and name it getsong. php, the code is as follows:

<&#63;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;
} 

&#63;>

Copy after login

Here, use rand() to randomly retrieve a record (track) from MYSQL, and then use variables to save the name of the song, the name of the singer, and the address, and connect them with the symbol "|". And 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 simply entering http://www.yousite.com/getsong.php in the browser address bar to obtain the URL address of the song. Only requests sent through AJAX are accepted.
4. Finalize and improve the code
Finally, we can modify the jPlayer code to make our player 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
       }).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>

Copy after login

It can be seen that in the ready method of the jPlayer plug-in, an ajax request is initiated, requesting getsong.php, randomly obtaining a played song, and then re-using the split method to split the "|" symbol on the returned data. The resulting string array string[0] is the URL address of the mp3 song, stringp[1] is the name of the singer, here passed
$('#artist').html(string[1]) is displayed, and $('#songname').html(string[2]) is displayed. swfPath specifies the directory where the player's FLASH is located as the js directory. Of course, you can define the path yourself. Supplied pointed out that only MP3 format is supported.
After running, you can see the following player effect:

201638165806293.jpg (434×126)