Heim >Web-Frontend >js-Tutorial >Ein Beispiel für das Entwerfen eines einfachen Web-Musikplayers mit jQuery_jquery

Ein Beispiel für das Entwerfen eines einfachen Web-Musikplayers mit jQuery_jquery

WBOYOriginal: 2016-05-16 15:11:371322Durchsuche

1. Bereiten Sie die Datenbank vor
Zuerst entwerfen wir die MYSQL-Datenbank wie folgt:

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 ;

Hier stellt das URL-Feld die Speicheradresse der MP3-Musik dar, der Künstler ist der Sänger des Liedes und der Titel ist der Name des Liedes. Fügen wir wie folgt einige Beispieldaten hinzu:

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. HTML-Seite entwerfen
Nachdem wir das Design der Datenbank abgeschlossen haben, können wir mit dem Design der HTML-Seite beginnen. Hier müssen wir zunächst jPlayer (http://jplayer.org/) herunterladen, ein Musikwiedergabe-Plug-in für jQuery. Nachdem Sie das heruntergeladene Paket entpackt haben, legen Sie den Inhalt der Ordner „js“ und „skin“ im Stammverzeichnis Ihrer Anwendung ab. Dabei handelt es sich um die zu verwendenden Javascript-Dateien und Anwendungsdateien im CSS-Stil. Jetzt können Sie mit der Gestaltung der HTML-Seite beginnen. Benennen Sie die Datei demo.html und der Code lautet wie folgt:

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

Der obige Code ist eigentlich sehr einfach. Er führt lediglich die erforderlichen Dateien und Stile der jQuery- und jPlayer-Plugins ein und legt dann das Erscheinungsbild des Players fest. Hier wird DIV verwendet, um die angegebene Ebene vorab zu positionieren B. Wiedergabe-Fortschrittsbalken (Start/Pause), Lautstärkeregelung usw.

3. Lesen Sie die Titel in der Datenbank
Als nächstes können wir die abzuspielenden Songs aus der Datenbank lesen. In diesem Artikel wird die PHP-Open-Source-Bibliothek von ezSQL verwendet, um eine Verbindung zur Datenbank herzustellen. Wir werden die spezifische Verwendung von ezSQL nicht allzu ausführlich vorstellen. Die Verwendung ist hier eigentlich sehr einfach. Legen Sie einfach die beiden Dateien ez_sql_core.php und ez_sql_mysql.php in das Stammverzeichnis des Projekts Name it getsong.php, der Code lautet wie folgt:

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

Hier verwenden Sie rand(), um zufällig einen Datensatz (Track) aus MYSQL abzurufen, und verwenden Sie dann Variablen, um den Namen des Liedes, den Namen des Sängers und die Adresse zu speichern und diese mit dem Symbol „|“ zu verbinden ". Und da wir Ajax verwenden müssen, um dieses PHP aufzurufen, achten Sie auf die Anweisung:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
Der Hauptzweck besteht darin, zu verhindern, dass Benutzer einfach http://www.yousite.com/getsong.php in die Adressleiste des Browsers eingeben, um die URL-Adresse des Songs zu erhalten. Es werden nur über AJAX gesendete Anfragen akzeptiert.
4. Endgültige Implementierung des verbesserten Codes
Schließlich können wir den jPlayer-Code ändern, um unseren Player zum Laufen zu bringen. Ändern Sie den demo.html-Code wie folgt:

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

Es ist ersichtlich, dass in der Ready-Methode des jPlayer-Plug-Ins eine Ajax-Anfrage initiiert wird, die getsong.php anfordert, zufällig einen gespielten Song abruft und dann die Split-Methode erneut verwendet, um das „|“ aufzuteilen. Symbol für die zurückgegebenen Daten. Das resultierende String-Array string[0] ist die URL-Adresse des MP3-Songs, stringp[1] ist der Name des Sängers, hier übergeben
$('#artist').html(string[1]) wird angezeigt und $('#songname').html(string[2]) wird angezeigt. swfPath gibt das Verzeichnis an, in dem sich das FLASH des Players befindet. Natürlich können Sie den Pfad selbst festlegen. Es wird darauf hingewiesen, dass nur das MP3-Format unterstützt wird.
Nach dem Ausführen können Sie die folgenden Spielereffekte sehen:

201638165806293.jpg (434×126)

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie JQuery, um die intelligente Formularvalidierungsfunktion_jquery zu implementierenNächster Artikel：Verwenden Sie JQuery, um die intelligente Formularvalidierungsfunktion_jquery zu implementieren

In Verbindung stehende Artikel

Mehr sehen