Contoh reka bentuk pemain muzik web mudah menggunakan jQuery

Contoh reka bentuk pemain muzik web mudah menggunakan jQuery_jquery

WBOY

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

asal

1321 orang telah melayarinya

1. Sediakan pangkalan data
Pertama, kami mereka bentuk pangkalan data MYSQL seperti berikut:

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 ;

Salin selepas log masuk

Di sini, medan url mewakili alamat storan muzik mp3, artis ialah penyanyi lagu itu dan tajuk ialah nama lagu. Mari tambahkan beberapa data sampel, seperti berikut:

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

Salin selepas log masuk

2. Reka bentuk halaman HTML
Selepas menyiapkan reka bentuk pangkalan data, kita boleh mula mereka bentuk halaman HTML. Di sini kita perlu memuat turun jPlayer (http://jplayer.org/), pemalam main balik muzik untuk jQuery. Selepas menyahzip pakej yang dimuat turun, letakkan kandungan folder js dan kulit ke dalam direktori akar aplikasi anda Ia adalah fail javascript dan fail aplikasi gaya CSS yang akan digunakan. Sekarang anda boleh mula mereka bentuk halaman HTML. Namakan fail demo.html dan kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Kod di atas sebenarnya sangat mudah Ia hanya memperkenalkan fail dan gaya pemalam jQuery dan jPlayer yang diperlukan, dan kemudian menetapkan penampilan pemain Di sini, DIV digunakan untuk pra-posisi lapisan yang ditentukan sebagai bar kemajuan main balik (mulakan/jeda), kelantangan kawalan bunyi, dsb.

3. Baca trek dalam pangkalan data
Seterusnya, kita boleh membaca lagu yang akan dimainkan dari pangkalan data Artikel ini akan menggunakan perpustakaan sumber terbuka PHP ezSQL untuk menyambung ke pangkalan data Sudah tentu, anda juga boleh menggunakan kaedah sambungan MYSQL. Kami tidak akan memperkenalkan penggunaan khusus ezSQL dalam terlalu banyak Penggunaan di sini sebenarnya sangat mudah. Hanya letakkan dua fail ez_sql_core.php dan ez_sql_mysql.php dalam direktori akar projek. Kami menulis fail php seperti berikut namakan getsong php, kodnya adalah seperti berikut:

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

Salin selepas log masuk

Di sini, gunakan rand() untuk mendapatkan semula rekod (trek) secara rawak daripada MYSQL, dan kemudian gunakan pembolehubah untuk menyimpan nama lagu, nama penyanyi dan alamat, dan sambungkannya dengan simbol "| ". Dan kerana kita perlu menggunakan ajax untuk memanggil PHP ini, perhatikan pernyataan:
if(!kosong($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
Tujuan utama adalah untuk menghalang pengguna daripada hanya memasukkan http://www.yousite.com/getsong.php dalam bar alamat pelayar untuk mendapatkan alamat URL lagu Hanya permintaan yang dihantar melalui AJAX diterima.
4. Selesaikan dan perbaiki kod
Akhir sekali, kami boleh mengubah suai kod jPlayer untuk membuat pemain kami dijalankan Ubah suai kod demo.html seperti berikut:

　　<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>

Salin selepas log masuk

Dapat dilihat bahawa dalam kaedah sedia pemalam jPlayer, permintaan ajax dimulakan, meminta getsong.php, mendapatkan lagu yang dimainkan secara rawak dan kemudian menggunakan semula kaedah split untuk memisahkan "|" simbol pada data yang dikembalikan Rentetan tatasusunan rentetan yang terhasil[0] ialah alamat URL lagu mp3, stringp[1] ialah nama penyanyi, di sini lulus
$('#artist').html(string[1]) dipaparkan dan $('#songname').html(string[2]) dipaparkan. swfPath menentukan direktori di mana FLASH pemain terletak sebagai direktori js Sudah tentu, anda boleh menentukan sendiri laluan yang dibekalkan menunjukkan bahawa hanya format MP3 yang disokong.
Selepas berlari, anda boleh melihat kesan pemain berikut:

201638165806293.jpg (434×126)