Maison > Article > interface Web > Un exemple de conception d'un simple lecteur de musique Web utilisant jQuery_jquery

Un exemple de conception d'un simple lecteur de musique Web utilisant jQuery_jquery

WBOYoriginal: 2016-05-16 15:11:371304parcourir

1. Préparer la base de données
Tout d'abord, nous concevons la base de données MYSQL comme suit :

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 ;

Ici, le champ url représente l'adresse de stockage de la musique mp3, l'artiste est le chanteur de la chanson, et le titre est le nom de la chanson. Ajoutons quelques exemples de données, comme suit :

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. Concevoir une page HTML
Après avoir terminé la conception de la base de données, nous pouvons commencer à concevoir la page HTML. Ici, nous devons d'abord télécharger jPlayer (http://jplayer.org/), un plug-in de lecture de musique pour jQuery. Après avoir décompressé le package téléchargé, placez le contenu des dossiers js et skin dans le répertoire racine de votre application. Ce sont les fichiers javascript et les fichiers d'application de style CSS à utiliser. Vous pouvez maintenant commencer à concevoir la page HTML. Nommez le fichier demo.html et le code est le suivant :

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

Le code ci-dessus est en fait très simple. Il introduit simplement les fichiers et styles nécessaires des plug-ins jQuery et jPlayer, puis définit l'apparence du lecteur. Ici, DIV est utilisé pour prépositionner le calque spécifié, tel. comme barre de progression de la lecture (démarrage/pause), contrôle du volume, etc.

3. Lire les pistes dans la base de données
Ensuite, nous pouvons lire les chansons à jouer à partir de la base de données. Cet article utilisera la bibliothèque open source PHP d'ezSQL pour vous connecter à la base de données. Bien sûr, vous pouvez également utiliser la méthode de connexion MYSQL traditionnelle. Nous ne présenterons pas trop l'utilisation spécifique d'ezSQL. L'utilisation ici est en fait très simple. Placez simplement les deux fichiers ez_sql_core.php et ez_sql_mysql.php dans le répertoire racine du projet. nommez-le getsong.php, le code est le suivant :

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

Ici, utilisez rand() pour récupérer aléatoirement un enregistrement (piste) depuis MYSQL, puis utilisez des variables pour enregistrer le nom de la chanson, le nom du chanteur et l'adresse, et connectez-les avec le symbole "| ". Et parce que nous devons utiliser ajax pour appeler ce PHP, faites attention à la déclaration :
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
L'objectif principal est d'empêcher les utilisateurs de simplement saisir http://www.yousite.com/getsong.php dans la barre d'adresse du navigateur pour obtenir l'adresse URL de la chanson. Seules les demandes envoyées via AJAX sont acceptées.
4. Implémentation finale du code amélioré
Enfin, nous pouvons modifier le code de jPlayer pour faire fonctionner notre lecteur. Modifiez le code demo.html comme suit :

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

On peut voir que dans la méthode ready du plug-in jPlayer, une requête ajax est lancée, demandant getsong.php, obtenant aléatoirement une chanson jouée, puis réutilisant la méthode split pour diviser le "|" symbole sur les données renvoyées. Le tableau de chaînes résultant string[0] est l'adresse URL de la chanson mp3, stringp[1] est le nom du chanteur, passé ici
. $('#artist').html(string[1]) est affiché et $('#songname').html(string[2]) est affiché. swfPath spécifie le répertoire où se trouve le FLASH du lecteur comme répertoire js. Bien entendu, vous pouvez définir le chemin vous-même. Fourni a souligné que seul le format MP3 est pris en charge.
Après l'exécution, vous pouvez voir les effets de joueur suivants :

201638165806293.jpg (434×126)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez JQuery pour implémenter la validation de formulaire intelligent function_jqueryArticle suivant：Utilisez JQuery pour implémenter la validation de formulaire intelligent function_jquery

Articles Liés

Voir plus