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

 

 

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, mais ici comme nous ne traitons que le XHTML, nous allons devoir passer par l’ouverture d’une page afin que la lecture d’un fichier audio soit déclanchée…

 

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 DewPlayer

 

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

 

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 en ligne :

Ouvrir la page "bonjour.html"

 

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

Télécharger titanic.rar

 

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>

 

Philippe BOULANGER