<< Retour au sommaire

 

 

Le streaming

 

 

 

Le sommaire :

1.                 Introduction.

2.                 Le Streaming en XHTML.

3.                 Un exemple en XHTML.

4.                 Un exemple en PHP.

5.                 Élaborons un Juke Box !

6.                 Essayer & télécharger.

 

 

Introduction

 

Le streaming, en français le flux », est une solution pour lire un fichier MP3 en ligne dans les meilleures conditions.

 

En XHTML, la balise <bgsound> permet de lire un fichier audio à l’ouverture d’une page, mais la difficulté de ce procédé et que le fichier audio doit être complètement chargé par votre machine avant d’être lu.

Dans le cas de fichiers de petites tailles n’excédant pas 1 ou 2 MO, la lecture du fichier ne présente pas d’inconvénients majeurs.

 

Par contre, il faut néanmoins ouvrir une nouvelle page HTML si l’on désire que la balise <bgsound> soit exécutée…

 

Le streaming gère la lecture de vos fichiers d’une manière quelque peu différente.

Le principal avantage du streaming, donc du flux, c’est que le fichier audio est lu en ligne par le lecteur « DPlayer-audio », et que votre navigateur reçoit le résultat à fur et à mesure de son traitement en ligne.

On peut donc considérer que le démarrage de sa lecture est quasi immédiat…

 

Concernant le fonctionnement global du streaming, vous placez un lecteur en ligne, le lecteur DPlayerAudio, puis, au moins un fichier au format « MP3 », et enfin, dans la page WEB , vous insérez le code XHTML correspondant qui contient un grand nombre de paramètres qui sont intégrés dans la balise <object>.


Le Streaming en XHTML

 

Pour commencer, il faut installer le lecteur « DewPlayer » dans le dossier qui contiendra votre page WEB.

 

Voici le lien de téléchargement :

 

Télécharger le lecteur DPlayer-audio >>

 

Après avoir téléchargé le fichier « rar », vous le décompresserez et vous copierez le fichier « dewplayer.swf » dans le dossier de votre site, celui qui contiendra la page WEB qui devra afficher le lecteur.

Bien sûr, dans le code XHTML que je vais vous présenter, si le chemin du lecteur DewPlayer est modifié, et que cela soit de façon relative ou absolue, vous pouvez stocker le lecteur dans le dossier de votre choix !

Cependant, si aucun chemin n’est spécifié devant le nom du lecteur, ce dernier devra être dans le même dossier que celui contenant la page WEB…

 

Allez, vous êtes prêts ?

Eh bien, pour exécuter un fichier MP3 voici la syntaxe :

 

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=test.mp3&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3=test.mp3&amp;autostart=1" /></object>

 

Voilà, vous venez de découvrir la syntaxe hyper accueillante de la balise <object>…

Bon, vous n’avez plus qu’à copier ces quelques lignes de XHTML dans l’une de vos pages, et bien sûr, à l’intérieur d’un bloc <body>.

Dans ce code, après l’avoir copié, Remplacez le fichier « test » par le nom de votre fichier et essayez !

Le fichier « test » est d’ailleurs spécifié à 2 reprises, vous devez donc réaliser 2 remplacements…

 

Quelques attributs :

 

La lecture automatique :

Il est possible de configurer la lecture automatique du fichier mP3 par l’intermédiaire de l’attribut autostart, et ce, en lui attribuant la valeur 1, la valeur 0 quant à elle, ne déclenche pas la lecture de façon automatique, il faudra donc que l’utilisateur clique sur le bouton « play ».

 

La lecture en boucle :

Il est possible de lire en boucle un fichier MP3 grâce à l’attribut autoreplay en lui affectant la valeur 1.

 

Le temps :

Il est possible d'afficher le temps en minutes:secondes, grâce à l’attribut showtime en lui affectant la valeur 1.

 

Le volume :

Pour modifier le volume par défaut du son, vous devez affecter une valeur à l’attribut volume, valeur exprimée de 0 (silencieux) à 100 (volume maximal).

 

Les dimensions du lecteur :

Concernant la taille du lecteur à l’écran, vous disposez de 2 attributs :

width pour la largeur, et height pour la hauteur.

Les valeurs à leur affecter sont exprimées en pixels…

Pour ne pas voir le lecteur à l’écran, vous devez affecter la valeur 0 à ces 2 attributs.


Un exemple en XHTML

 

Voici un fichier XHTML qui lance automatiquement la lecture du fichier « titanic.mp3 » et ce, dès son ouverture.

Attention, à titre d’informations, je préfère vous prévenir, c’est JAWS qui chante !

En clair, on ne se moque pas…

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<meta http-equiv="Content-Language" content="fr">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Quelle belle chanson</title>

</head>

<body>

<h1>JAWS chante</h1>

<p>

Pas mal non ?<br />

Enfin, je veux dire, "pour une synthèse vocale..."<br />

Ici dans cette page, le code du lecteur est exécuté naturellement en XHTML.

</p>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=titanic.mp3&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3=titanic.mp3&amp;autostart=1" /></object>

<hr />

</body>

</html>

 


Un exemple en PHP

 

Voici maintenant un exemple de streaming en PHP.

 

Pour que le PHP puisse contrôler l’exécution du lecteur, comme le code du lecteur est de toute manière du XHTML, il suffit de placer le code du lecteur en paramètre à la fonction « echo » !

Mais attention, comme le code du lecteur contient un grand nombre de guillemets, il conviendra alors d’encadrer le tout par des apostrophes.

 

En reprenant le même exemple que dans le chapitre précédent, voici ce que ça donne…

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<meta http-equiv="Content-Language" content="fr">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Quelle belle chanson</title>

</head>

<body>

<h1>JAWS chante</h1>

<p>

Pas mal non ?<br />

Enfin, je veux dire, "pour une synthèse vocale..."<br />

Ici dans cette page, le code du lecteur est exécuté par l'instruction "echo" du PHP.

</p>

<?php

echo '<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=titanic.mp3&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3=titanic.mp3&amp;autostart=1" /></object>'; ?>

</body>

</html>

 


Élaborons un Juke box !

 

Dans ce chapitre, nous allons élaborer un Juke-box.

 

Quelles-sont les particularités de ce projet ?

 

Eh bien voilà…

 

Nous devons créer un index qui sera le « juke-box » et qui affichera la liste des chansons.

Lorsque l’utilisateur cliquera sur l’une des chansons, la page du lecteur sera chargée et devra recevoir en paramètres le nom du fichier MP3 à jouer.

 

L’index, donc le « juke-box », ce sera la page ouvrir.php.

Le lecteur, il sera affiché dans la page go.php.

Pour simplifier la mise à jour, lorsqu’un nouveau fichier MP3 est importé dans le juke-box, il suffit de placer ce fichier dans le dossier « chansons », et de rajouter une ligne d’identification de ce fichier MP3 dans un fichier texte intitulé « liste.txt ».

La ligne doit se composer de 3 données séparées par un point virgule.

NomDuFichier;Interprète et titre de la chanson;description

Par exemple, si le groupe « Accept » chante la chanson « The embarkation » :

Accept-THE-EMBARKATION.mp3;Accept, the embarkation;Une introduction du groupe de hard rock ACCEPT

 

Dans le fichier index.php, pour afficher la liste des fichiers MP3, la fonction « file » pourra extraire le contenu de « liste.txt », et ensuite, dans une boucle « for », les lignes de cette extraction seront traitées une par une par la fonction « explode ».

 

Au lancement du lecteur DPlayerAudio dans la page « go.php », les 3 données du fichier MP3 à traiter seront passées en paramètres au lien hypertexte qui appelle la page du lecteur, qui pourra récupérer ces 3 données par le biais de la méthode « get ».

 

Du coup, comme le fichier MP3 à jouer est représenté par une variable locale, cette variable devra être placée dans le code XHTML du lecteur sous la forme d’une concaténation.


Voici le code du juke box, donc le fichier ouvrir.php :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<meta http-equiv="Content-Language" content="fr">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Juke Box</title>

</head>

<body>

<table border="2">

<caption>Le juke box</caption>

<tr><th colspan="2">

Pour écouter l'une des chansons présentées ci-après, veuillez cliquer sur le titre de la chanson de votre choix.

</th></tr>

<tr><th>Chansons</th><th>Descriptions</th></tr>

<!-- Affichage de la liste des chansons, une ligne de 2 colonnes par chanson -->

<?php

// extraction du contenu du fichier texte "liste.txt"

$fichier = file("liste.txt");

// Création de la boucle qui traite à chaque itération une ligne du résultat de l'extraxtion

for($i=0;$i<count($fichier);$i=$i+1) {

// Extraction de la ligne courante de l'extraxtion de base dans le tableau $chanson

 $chanson = explode(";",$fichier[$i]); ?>

 <tr><td>

 <!-- Affichage du lien et de la description, passage en paramètres des 3 données de la chanson dans le lien -->

 <a href="go.php?NomChanson=<? echo $chanson[0]; ?>&amp;TitreChanson=<? echo $chanson[1];  ?>&amp;DescriptionChanson=<? echo $chanson[2] ?>">

<? echo $chanson[1]; ?>

</a></td><td>

<? echo $chanson[2]; ?>

</td></tr> <? } ?>

</table>

</body>

</html>

Voici le code du lecteur, donc la page « go.php » :

 

<?php

// extraction des données passées en paramètres par le biais de la méthode get

extract ($_GET,EXTR_OVERWRITE);

// ajout du chemin de destination devant le nom de la chanson MP3

$NomChanson = "chansons/".$NomChanson; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<meta http-equiv="Content-Language" content="fr">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Le lecteur</title>

</head>

<body>

<table border="2">

<caption>écoute d'une chanson</caption>

<tr><td>

<a href="ouvrir.php">

&lt;&lt; Revenir au juke box

</a></td></tr>

<tr><td>

Titre de la chanson : <? echo $TitreChanson; ?><br />

Description :<br />

<? echo $DescriptionChanson; ?>

</td></tr>

<tr><td>

<!-- Affichage du lecteur -->

<!-- le fichier mp3 à jouer est représenté par la variable locale $NomChanson -->

<?php

echo '<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3='.$NomChanson.'&amp;autostart=1" width="200" height="20"><param name="wmode" value="transparent"><param name="movie" value="dewplayer.swf?mp3='.$NomChanson.'&amp;autostart=1" /></object>'; ?>

</td></tr>

</table>

</body>

</html>

 


Essayer & télécharger

 

Vous pouvez maintenant essayer en ligne les 3 exemples qui ont été étudiés dans ce manuel :

 

Voir les exemples en lignes >>

 

Pour télécharger le tout ?

 

Télécharger les 3 exemples >>

 

Philippe BOULANGER