<< Retour au sommaire

 

HTML 5, Le streaming audio

 

 

Table des matières

  1. Introduction ;
  2. Un exemple.

 

Introduction

 

Dans ce manuel, vous allez découvrir une technique multimédia du WEB, le streaming audio.

Dans le cas de l’emploi des balises <audio> et <video> du HTML5, c’est le lecteur « Flash player » installé sur votre ordinateur qui lit les différents documents de votre site. Ici, vous allez placer un lecteur dans le dossier contenant votre fichier MP3, et par l’intermédiaire de la balise <object>, la lecture en ligne du fichier MP3 devient possible.

Le lecteur proposé est « dewplayer.swf ».

Quant au code nécessaire dans la page « HTML », le voici :

 

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

 

Description :

·       Le bloc <object> doit être placé dans votre page HTML, à l’endroit exact où doit être affiché le lecteur ;

·       Vous devez remplacer « test » par le nom de votre fichier MP3 ;

·       L’attribut « autostart » peut prendre 2 propriétés, 0 si le fichier MP3 ne doit pas être joué à l’ouverture de la page, et 1 dans le cas contraire.

 

Récapitulatif :

  1. Vous créez un dossier dans lequel vous y placez le lecteur « dewplayer.swf » ainsi que votre fichier MP3, et bien sûr, la page HTML qui doit afficher le lecteur ;
  2. Dans la page, vous y placez le code de la balise <object> ;
  3. Dans ce code, vous remplacez « test » par le nom du fichier MP3 ;
  4. Toujours dans le code de la balise <object>, vous affectez la propriété 0 à l’attribut « autostart » si vous ne désirez pas que le fichier MP3 soit lu à l’ouverture de la page, et 1 dans le cas contraire.

 

Maintenant, je vous propose de télécharger le lecteur « dewplayer.swf » ainsi que le code de la balise <object> qui sera toujours à placer dans vos pages HTML :

Cliquez ici pour télécharger le lecteur >>

 


Un exemple

 

Dans un dossier, nous avons les éléments suivants :

  1. Le lecteur « dewplayer.swf » ;
  2. L’image animée « equalizer.gif » ;
  3. Le fichier MP3 intitulé « soul-fly.mp3 » ;
  4. La page WEB intitulée « index.html » et dont en voici le code :

 

<!DOCTYPE html>

<html>

<head>

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

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Le streaming audio</title>

</head>

<body>

<h1>soul fly</h1>

<p style="text-align: center">

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

</p>

<br /><br />

<img src="equalizer.gif" alt="un equalizer" />

</p>

</body>

</html>

 

Tester la page >>

 

Philippe BOULANGER