Le streaming

Le sommaire :

Introduction.
Exécution du streaming, syntaxe passe partout.
La norme W3C.
Quelques attributs.
Un exemple en XHTML.
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 :

http://plume.unadev.com/ftp/DewPlayer.rar

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 :

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 !

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

http://jaws.unadev.com/XHTML/streaming/bonjour.html

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

http://jaws.unadev.com/XHTML/streaming/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">

<head>

<title>JAWS va chanter !</title>

</head>

<body>

<table>

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 :

http://jaws.unadev.com/javascript/streaming/titanic.htm

Télécharger l’exemple :

http://jaws.unadev.com/javascript/streaming.rar

Le code :

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

<head>

<title>JAWS chante</title>

function Go() {

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

</script>

</head>

<body>

<table>

<th>Bonjour </th>

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>

Vous êtes prêts ? <br />

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

</td></tr>

</table>

</body>

</html>

Philippe BOULANGER