<< Retour au sommaire

 

 

Le streaming

 

 

 

Le sommaire :

  1. Introduction.
  2. Exécution du streaming, syntaxe passe partout.
  3. La norme W3C.
  4. Quelques attributs.
  5. Un exemple en XHTML.
  6. Un exemple en javascript.

 

 

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.

L’avantage du streaming, donc du flux, c’est que le fichier audio est lu par votre navigateur à fur et à mesure de son chargement.

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

 

En « JavaScript », nous pouvons associer la lecture d’un fichier audio en mode streaming par l’intermédiaire d’un événement du genre, validation d’un bouton de formulaire.

 

Le grand avantage, c’est que la lecture du fichier audio sera déclanchée sans qu’aucune nouvelle page soit chargée.

 

Le pied !

 

Ah, ici dans ce document, nous ne traiterons que le XHTML jusqu’au dernier chapitre, et enfin, je vous présenterai un exemple de streaming associé à l’événement « OnClick ».

 

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

 

Voici le lien de téléchargement :

Télécharger le lecteur DPlayer >>

 

Après avoir téléchargé le fichier « rar », vous le décompressez et vous copiez le fichier « dewplayer.swf » dans le dossier de votre site, celui qui contiendra la page XHTML.

Bien sûr, dans le code XHTML que je vais vous présenter, si le chemin du lecteur DewPlayer est spécifié en absolu, vous pouvez stocker le lecteur dans le dossier du serveur de votre choix!

 

 


L’exécution du streaming, syntaxe passe partout

 

Allez, vous êtes prêts ?

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

 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="20" id="dewplayer" align="middle"><param name="wmode" value="transparent"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="dewplayer.swf?mp3=test.mp3&amp;autostart=1" /><param name="quality" value="high" /><param name="bgcolor" value="FFFFFF" /><embed src="dewplayer.swf?mp3=test.mp3&amp;autostart=1" quality="high" bgcolor="FFFFFF" width="200" height="20" name="dewplayer" wmode="transparent" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object>

 

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

Il existe plusieurs syntaxes, celle que je vous propose a le mérite, soi-disant, de toujours fonctionner !

 

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

Remplacez le fichier « test » par le nom de votre fichier et essayez !

 

La syntaxe que je viens de vous présenter fonctionne partout !

Mais elle ne répond pas à la norme W3C…

 

 

La norme W3C

 

Voici maintenant une syntaxe qui répond à la norme W3C mais qui ne fonctionnera pas depuis des navigateurs d’anciennes générations !

 

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

 

 


Quelques attributs

 

La lecture automatique :

Il est possible de lancer automatiquement la lecture avec l'option autoplay (ou autostart) et la valeur 1, true ou yes.

Par exemple :

dewplayer.swf?mp3=test.mp3&autoplay=1

 

La lecture en boucle :

Il est possible de relancer automatiquement la lecture à la fin du son, avec l'option autoreplay et la valeur 1, true ou yes.

Par exemple

: dewplayer.swf?mp3=test.mp3&autoreplay=1

 

Le temps :

Il est possible d'afficher le temps en minutes:secondes, avec l'option showtime et la valeur 1, true ou yes.

Par exemple :

dewplayer.swf?mp3=test.mp3&showtime=1

 

Le volume :

Pour modifier le volume par défaut du son, valeur de 0 (silencieux) à 100 (volume maximal). Par exemple, pour un volume de 80% :

dewplayer.swf?mp3=test.mp3&volume=80.

 

 


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, c’est JAWS qui chante…

En clair, on ne se moque pas…

 

Pour essayer l’exemple  :

Afficher l'exemple en XHTML >>

 

Pour télécharger l’exemple, enfin je veux dire tout le dossier !

Télécharger l'exemple en XHTML >>

 

Voici maintenant le code de la page bonjour.html :

 

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

<title>JAWS va chanter !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="http://www.sancfrd.com/CSS/styles.css" /> 

</head>

<body>

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

<table>

<tr><td>

JAWS chante le TITANIC...

</td></tr>

</table>

</body>

</html>

 

 


Un exemple en javascript

 

Voici maintenant un exemple de streaming en java script.

Ici, le code XHTML du streaming est introduit dans la fonction « Go » javascript, et dans la méthode « document.write ».

 

Lorsque l’utilisateur validera le bouton « Go », la fonction sera exécutée !

 

Mais avant de visualiser le code :

 

Voir l’exemple en ligne :

Afficher l'exemple en JavaScript >>

 

Télécharger l’exemple en JavaScript >> :

 

Le code :

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

<title>JAWS chante</title>

<script type="text/javascript">

function Go() {

document.write('<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>'); }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="http://www.sancfrd.com/CSS/styles.css" /> 

</head>

<body>

<table>

<th>Bonjour </th>

<tr><td>

Si vous avez une revue d'écran, vous pouvez arrêter la chanson en réalisant le raccourci clavier ALT+Flèche gauche.

</td></tr>

<tr><td>

<form name="lancement">

Vous êtes prêts ? <br />

<input type="button" value="Go" OnClick="Go()" />

</form></td></tr>

<tr><td>

<img src="requin.jpg" alt="un requin !" />

</td></tr>

</table>

</body>

</html>

 

Philippe BOULANGER