Insérer un lecteur audio dans une page web    
 

José Mª Campo Delgado

    

 
 
 
 

Le Prof de FLE et les fichiers audio

Les Lecteurs audio

Les différentes méthodes

Codes "embed"

Lecteur flash MP3

En savoirdavantage
 
 
 
 

 
 
 
 

 Tôt pu tard le professeur de FLE intéressé par les nouvelles technologies et l’utilisation d’Internet dans les différentes activités pédagogiques va tomber sur des termes du type : AAC, MP3, MP3 Pro, Ogg Vorbis, WMA, RAM ... Comme Monsieur Jourdain, on pourrait se demander si ces étranges mots sont bien de la "prose" ou un vocabulaire cabalistique pour certains initiés. Et bien, il s’agit tout bêtement de différents types d’extensions des fichiers audio compressé qu’on utilise sur Internet. Étant donné que les documents audio occupent une place très importante dans nos méthodologies, il est évident que le professeur impliqué devra au moins apprendre quelques rudiments sur ces différents types de fichiers audio. Dans ce cas, la façon la plus facile de commencer à aborder le problème est, à mon avis, de jeter, d’abord, un petit coup d’œil à l’encyclopédie Wikipedia dans l’article qui établit le liste de ces extensions et de se familiariser avec elles.

C’est vrai que, à l’ère du tout numérique, il n’est pas facile de se déterminer pour l'une ou l'autre de ces normes et pour le lecteur audio le plus adapté à nos besoins. Je suis sûr que la plupart d’entre nous a déjà fait l’expérience d’avoir essayé d’écouter un document audio sur une page web et, à cause d’une erreur de lecture ou du manque d’un greffon (plugin) qui nous est complètement étrange, être sorti de la page sans avoir pu l’écouter.

En effet, l’insertion d’un document audio sur un page web peut poser pas mal des problèmes aux néophytes que nous sommes car, dans la plupart des cas, on ignore de quelle façon ce document que nous écoutons sans encombre sur notre ordinateur va être « lu » par le visiteur de notre page web ou de notre blog. Pour être plus concret, il faut dire qu’il y a plusieurs façons d’écouter les fichiers audio sur Internet. Ces méthodes se différencient selon que l'on veut faire appel:
 

  • 1) À l'application lecteur multimédia par défaut du visiteur (Windows Media Player iTunes - QuickTime, RealMedia,WinAmp etc...) qui s'ouvre dans une nouvelle fenêtre.
    • 2) À un greffon (plugin) multimédia du navigateur qui affiche ou non un panneau de contrôle (play, avance rapide, stop, etc.) dans la page web et qui est donc « insérée » dans celle-ci.
Pour le professeur de FLE il est évident que la deuxième possibilité est beaucoup plus intéressante car elle permet, par exemple, d’écouter et de voir ou manipuler sur la même page un texte ou un exercice.
Voici, par exemple, un lecteur Flash intégré dans cet article qui reproduit un petit extrait audio d’Arte radio.com sur la journée de Ricardo un petit enfant français de 11 ans. Vous pouvez cliquer sur  et écouter après l'extrait sans avoir besoin de sortir de cette page:


Ici, il s'agit d'un lecteur Flash crée par Dew et qui sera l'objet d'une analyse plus approfondie  dans ce même article.

Dans les lignes qui suivent je vais  essayer d’expliquer de la façon la plus facile possible comment faire pour insérer nos documents audio dans notre page web ou notre blogue. Il est évident que si nous sommes un peu familiarisés avec la syntaxe htlm qu’on utilise dans la plupart des pages web et dans les blogues, l’explication sera comprise beaucoup plus facilement. Et tout cas, j’espère que ces indices pourront aider à d’autres collègues et que les fichers audio (et pourquoi pas les fichiers vidéo) seront de plus en plus nombreux dans nos sites FLE.

 
Les lecteurs audio
Bien qu’il existe plusieurs douzaines de lecteurs audio /multimédia, quand on navigue sur la toile et dans la plupart des fureteurs il y aura, au moins (pas de polémique là-dessus svp), un de ces trois types de lecteurs audio intégré qui va lire les formats audio spécifiquement adaptés à Internet (le streaming par exemple). L'ordre étant arbitraire et sans corrélation d’importance aucune :
Windows Média (wma)


Real Player (rm ou ram)
Quicktime (mov)
(entre parenthèses le format audio exclusif du lecteur)

 Comme je viens de le souligner, normalement un de ces trois lecteurs audio a été défini par défaut pour lire les fichiers audio d’une façon intégrée ("embed") dans le navigateur qu’on utilise sur Internet. C'est-à-dire que, si on a inséré correctement dans la page web un fichier audio, le fureteur de l’utilisateur va se déclencher automatiquement lorsque la page est chargée. Il est impossible de savoir quel est le lecteur audio qui va être utilisé. Nous savons pourtant (pas de polémique là-dessus non plus svp) que, malgré tout, le SO (système d'exploitation) le plus répandu es celui de Windows dans ces différentes versions (98SE, 2000, XP, etc). Il est aussi évident que, selon les dernières statistiques, le logiciel de navigation le plus utilisé est toujours IE6.0 (Internet Explorer 6.0) et cela malgré la formidable réussite ces derniers temps de Firefox. Dans ces conditions, il est donc fort probable que notre ficher audio va être reproduit sur un lecteur Windows Media car ce lecteur est, jusqu’à présent, intégré par défaut dans IE6.0. Mais il y aura pourtant sans doute aussi un pourcentage important d’utilisateurs qui écouteront notre fichier avec un lecteur du type QuickTime, RealPlayer ou autre. 
 

Ce qui est important de souligner et qui va simplifier énormément les choses est que, tous les trois, sont capables de reproduire des archives MP3. Cela veut dire que, si nous voulons être sûrs d’une écoute correcte de notre fichier audio dans pratiquement tous les lecteurs intégrés dans les navigateurs, il vaut mieux utiliser le format MP3 pour nos fichiers audio. Cet article ne s’occupe pas des différents logiciels qui sont capables de transférer un ficher audio vers MP3. On suppose donc que nous disposons déjà de nos fichiers audio sous ce format et que nous les avons placés soit sur un site internet dont nous connaissons le chemin, soit dans notre ordinateur (conseil: de préférence dans la même archive que notre fichier html qui contient la page web) mais ,dans ce dernier cas bien sûr, il sera impossible de l'écouter dans la toile .

Ce chemin d’accès au fichier (dans l'exemple ci-dessous, par exemple,http://perso.wanadoo.es/grupoleonardo/mp3/vacances/lamer.mp3 est le chemin d’un petit extrait de « La Mer » de Charles Trenet) est très important car nous devrons après le copier et le placer dans le script que nous allons utiliser pour intégrer notre lecteur dans la page web.
 


Les différentes méthodes:
 

Dans chacune des méthodes ci-dessous, vous devez insérer le code HTML dans votre article du blogue ou votre page web. Pour cela, dans la plupart des sites qui abritent les blogs, vous aurez un onglet « HTML » ou « Edit HTLM » (ici celui de Blogger) que vous devrez ouvrir. Vous allez après souligner, copier (Ctrl + C) et coller (Ctrl + V) le code qui vous convient en ayant modifié selon les instructions ci-dessous les paramètres nécessaires (surtout faites attention au chemin de votre fichier audio !)
 

S’il s’agit de placer le code dans un page web, la méthode la plus facile est d’éditer votre page avec un programme du type FrontPage, puis cliquer sur l’onglet « code » ou « htlm » et le placer à l’endroit de la page qui nous intéresse (mais, en tout cas, entre les balises <body> et </body> ). 

    A) Le lien direct

C’est peut être la méthode la plus facile. Il vous suffit d'insérer un lien vers votre fichier audio, par exemple en utilisant ce code:
<a href="http://perso.wanadoo.es/grupoleonardo/mp3/vacances/lamer.mp3">Extrait de la Mer</a>
Résultat:
Extrait de La Mer
Si l'on clique sur le lien ci-dessus, on va télécharger ou reproduire l' extrait audio selon la configuration préalable de notre navigateur et SO.
Inconvénients:

1) La musique ne démarre pas automatiquement, elle est d'abord intégralement téléchargée.
2) Le plus important: le lecteur audio démarre dans une autre fenêtre ou est chargé dans l’ordinateur et il n’est donc pas inséré dans la page web ce qui empêche, par exemple, de travailler sur un texte et sur l’audio en même temps sur le même fenêtre. 

    La méthode "EMBED"

L'inclusion d'audio dans cette méthode se fait, comme dans le cas précédent, par insertion de code HTML dans la page. Cette méthode est peut être la plus simple (mais attention ! pas nécessairement la plus efficace). Il s'agit d'insérer une balise EMBED dans notre code HTLM de notre page web ou notre blogue :

 
<embed src="chemin_fichier_son.wma" width="280" height="45" ></embed>
 
Ce code donnera, si par exemple le type de lecteur prédéterminé dans le navigateur est Windows Media Player série 10 et votre ficher audio a une extension .wma typique de ce lecteur, le résultat suivant:

 
attention! ceci n’est qu’une image et ne reproduit donc rien !
On peut, bien sûr, ajouter d’autres paramètres (auto démarrage par exemple) à ce script mais j’ai préféré donner la syntaxe la plus simplifiée et qui fonctionne dans la plupart des cas. L'inconvénient de cette méthode est qu'elle peut produire des erreurs avec certaines versions de navigateurs et que le fichier audio doit être complètement chargé avant d'être lu ce qui implique, dans une connexion à faible débit, un temps d’attente trop prolongé sile fichier audio est un peu lourd.

    C) La méthode « OBJECT »

La méthode OBJECT est plus compliquée mais plus compatible que les deux précédentes. Elle permettra presque à coup sûr aux visiteurs d’écouter le fichier audio.
Cette méthode OBJECT définit le lecteur (WMP, iTunes, RealPlayer, QuickTime, etc.) qui sera utilisé par le visiteur, puis détermine certains paramètres de reproduction du fichier (démarrage automatique, boucle, etc.) Voici le code à insérer (attention!valable seulement pour le lecteur QuickTime):
<OBJECT


CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="http://chemin de votre ficher audio.mp3"> <PARAM name="AUTOPLAY" VALUE="false"> <PARAM name="LOOP" VALUE="false"> <PARAM name="CONTROLLER" VALUE="true"><EMBED type="audio/x-mpegurl" src="http://chemin de votre ficher audio.mp3"autoplay="false" width="160px" height="16px" loop="false"controller="true" LUGINSPAGE="http://www.apple.com/quicktime/download/"></EMBED></OBJECT>

Dans ce script vous devez modifier ce qui est en rouge et vous pouvez modifier ce qui est en vert.
 

Explications :
AUTOPLAY « false » = lecture lancée par le visiteur
AUTOPLAY « true » = lecture automatique dès que la page est chargée
CONTROLLER « false » = n’affiche pas le panneau de contrôle du lecteur
CONTROLLER« true » = affiche le panneau de contrôle du lecteur
PLUGINSPAGE = adresse internet pour télécharger le plugin si le visiteur ne l’a pas encore.

Résultat: 

attention !ceci n’est qu’une image et ne reproduit donc rien !

    D) Méthode du lecteur flash pour lire des fichiers MP3
C'est, sans aucun doute, la plus intéressante car la plus universelle (98 % des SO disposent du plugin flash correspondant). L'utilisation de Flash permet de ne pas rencontrer les habituels problèmes d'incompatibilité dus au navigateur ou au système d'exploitation du visiteur. Etant donné les caractéristiques particulières de cette méthode, elle sera l’objet de la dernière partie de cet article.
 
Codes "Embed" pour les trois lecteurs
Parmi les trois premières méthodes que j'ai analysées et malgré certains inconvénients, je crois qu’on peut utiliser de préférence celle de la balise embed car elle est plus simple (elle n'occupe normalement qu'une seule ligne) et plus universelle: il n'est pas obligatoire (mais on peut) définir, comme dans la méthode avec "object", un script spécifique pour déterminer le lecteur audio. J’ai pu constater d'ailleurs qu’elle donne de bons résultats dans pratiquement tous le fureteurs. Même si c’est vrai que cette balise «embed» telle qu'il est décrite ici, tend à être dépréciée dans le cas d'une validation xhtml et que, dans ce cas, il faudrait aussi l'intégrer dans une balise «object». Malgré tout, et par souci de simplification et d'efficacité je vais donner ici le script le plus simple et, par conséquent, le plus facile à modifier ou manipuler.
Voici le code spécifique pour les trois lecteurs audio les plus populaires sur la toile. Si vous décidez d’utiliser cette méthode pour votre blog ou page web vous devez modifier dans le script ce qui est en rouge (le chemin du fichier audio par exemple) puis le sélectionner, le copier et le coller dans l’endroit convenable de votre blog ou page web (rappel! dans ce cas, il faut qu’il soit situé entre les balises <body> et </body>): 

 

 Windows Media Player

 

 

Ce lecteur accepte divers types de fichier multimédia, à savoir : .wmv, .wma (exlusifs de ce lecteur), .avi, .mpg , .mp3 et .mp4. Il est d'ailleurs présent dans la presque totalité des SO (Systèmes d'exploitation) Windows dans sa dernière version XP. Mais pour l'utiliser il faut, bien entendu, que l'utilisateur possède Windows Media Player avec les codec adhoc. Entre les balises <body> et </body> de notre code HTLM et à l'endroit qui nous intéresse de la page web on doit copier et coller ce code: 
 

<embed src="chemin de votre fichier_son.wma ou mp3" width="245" height="45"></embed>
Si nous voulons que le lecteur ne commence pas automatiquement à reproduire le fichier audio dès qu'il l'aura chargé dans la page web, nous devrons ajouter autostart="false" à notre code:

<embed src="chemin de votre fichier_son.wma ou mp3" width="280" height="45"autostart="false"></embed>
Ce qui donne:

 


 

attention! ceci n’est qu’une image et ne reproduit donc rien !

 Real Player Media

 

 

Ce lecteur est capable de reproduire plusieurs types d'archives audio: .rm et .ram (exclusifs de ce lecteur) .mp3, etc. Il est très utilisé dans des pages web qui utilisent le flux de données audio en temps réel (streaming). Comme dans le cas du lecteur Windows Media Player, il faut qu'il soit présent dans le SO et qu'il ait été défini comme le lecteur par défaut du fureteur. Voici le script qui convient à ce type de lecteur: 
 

<embed src="chemin de votre fichier_son.rpm ou mp3" width=350 height=36></embed> 
Comme dans le cas du lecteur Windows Media Player, si nous voulons que le lecteur ne commence pas automatiquement à reproduire le fichier audio dès qu'il l'aura chargé dans la page web, nous devrons ajouter autostart=false à notre code:

<embed src="chemin de votre fichier_son.rpm ou mp3" width=350 height=36>autostart=false;</embed>


Ce qui donne



attention ! ceci n’est qu’une image et ne reproduit donc rien !

 

QuickTime

 
QuickTime est un lecteur très populaire sur Internet car il présente beaucoup d'avantages techniques. Comme les autres lecteurs, il est capable de reproduire des fichiers audio mp3. Comme dans les cas précédents, si on utilise cette balise <embed> il faut que le lecteur ait été déterminé comme préféré dans le navigateur. Si l'on veut que ce soit ce lecteur qui reproduira nos fichiers audio, même s'il n'a pas été prédéfini dans le fureteur, il vaut mieux utiliser le script <objet> tel qui a été décrit plus haut.

Pour reproduire avec un lecteur QuickTime avec cette balise <embed>, vous pouvez utiliser le script ci-dessous qui est un peu plus sophistiqué que les précédents car, dans ce cas, il est aussi plus complet :

<EMBED SRC="chemin de votre fichier.mp3" PLUGINSPAGE="http://www.quicktime.com" WIDTH="160" HEIGHT="16" CONTROLLER="true" LOOP="false" AUTOPLAY="false">
Explication:

Le nom du fichier ("chemin de votre fichier.mp3 ") doit naturellement être adapté. La taille de l'espace réservé au son (WIDTH="160" HEIGHT="16") est ici juste assez pour faire apparaître le contrôleur du lecteur. On peut, bien sûr, modifier la taille de ces paramètres pour faire apparaître, par exemple, un lecteur plus « long ». 

CONTROLLER="true" ou "false<Firefox; font-family: Trebuchet MS" lang="FR"> détermine si le panneau de contrôle apparaît ou pas.
LOOP="false" ou "true" détermine si le son joue en boucle ou non.
AUTOPLAY="true" ou "false"détermine si le son démarre automatiquement au chargement de la page ou pas.
PLUGINSPAGE="http://www.quicktime.com" décrit où il faut aller chercher le plugin sur le site Internet s’il manque. Ce qui donne :
 


attention ! ceci n’est qu’une image et ne reproduit donc rien !

 
 
Un lecteur flash MP3 pour notre page web
Avant de commencer à expliquer comment intégrer un lecteur dans une page web pour qu'il puisse lire nos fichiers audio mp3, il serait intéressant de répondre à une question peut être banale pour ceux qui naviguent d'une façon habituelle dans la toile mais qui ne l'est pas pour les debutants: Flash, c'est quoi? Très bonne question! Pour y répondre je suis ici l'excelente explication donnée par le webmestre du site Sequane à ce propos:
"Flash est un greffon et non un lecteur multimédia comme QuickTime ou le lecteur Windows Media. Cependant, le greffon Flash est disponible pour de très nombreuses plateformes, et est sans doute le lecteur le plus largement répandu sur le Web. Le lecteur Flash joue des fichiers qu'on appelle "animations" mais ce sont en fait de petits programmes qui peuvent comporter de l'audio, de la vidéo, de l'animation et des contrôles interactifs. Flash est un véritable outil de programmation et peut être utilisé pour créer un lecteur multimédia.
 

Qui plus est, Flash est capable de lire le format mp3 en natif. Cela signifie qu'il est facile de jouer un fichier mp3 dans Flash et mp3 est le format de compression audio le plus répandu sur le Web. Ce n'est pas le meilleur (OGG est meilleur en termes de compression et de qualité et est aussi open-source mais il n'est pas aussi accepté) mais il est toutefois très bon et tout un chacun connaît ce format."
 

Et voilà notre curisosité de néphytes des TICs exaucée! Il peut y avoir pourtant une deuxième (troisième....) question du type: Comment lit Flash une archive MP3? Ici, au lieu de me servir de la sagesse de notre webmestre, je pense qu'une démonstration est plus efficace qu'une centaine d'explications. Dans la première partie de cet article, j'ai dejà montré un exemple d'utilisation d'un lecteur flash. Comme cela ne me coûte rien, en voilà un autre:

 
 


 

Si vous cliquez sur  vous pourrez entendre une petite présentation de mon blogue sur Internet FLE d'Artifice, fait avec une voix de synthèse.

Comment cela marche? J'ai d'abord enregistré sur un serveur web l'archive mp3, puis j'ai utilisé le lecteur flash fait par Dew de la façon suivante:

1) Téléchargez l'archive .swf (flash) de Dew ici:dewplayer.swf (clic droit +"enregistrer sous" ou "enregistrer la cible sous" ...).
2) Gardez votre lecteur dewplayer dans votre ordinateur ou dans un site web (si vous voulez après l'utiliser sur la toile) et retenez le chemin où il se trouve.
3) Copiez, puis collez dans votre page web ou votre blogue (voir les instructions précédentes) le code HTLM ci dessous en modifiant bien sûr (en rouge) le chemin où se trouve votre archive audio mp3 et (en vert) votre archive .swf que vous avez gardé avant :

<object type="application/x-shockwave-flash"


data="chemin_de_votre_archive_dewplayer.swf?son=votre_son.mp3"
width="200" height="20"> <param name="movie" value="chemin_de_votre_archive_dewplayer.swf?son=votre_son.mp3"/> </object> 

 
Voilà! Cela devrait marcher. Une dernière précision: il existe beaucoup d'autres lecteurs flash qui peuvent reproduire des fichiers mp3 et leur fonctionnement est similaire à celui que je vous présente ici. 
L'avantage de celui de Dew est triple:

Il est gratuit et en lincence libre Creative Commons Attribution-ShareAlike License France.
Il est très léger: son "poids" dans votre ordinateur ou sur un serveur web est à peine 2 Kb!
Il est est très élégant: ce qui n'est pas la moindre des choses!

Bonne chance à tous! Et... bonne écoute sur le web!

En savoir davantage

Tutoriel pour Lire des MP3s avec Flash
Dans le site Sequane, le webmestre vous explique comment insérer un autre lecteur flash (fourni) pour lire des fichiers MP3.

Player Flash MP3 léger comme une plume 
Dans le blogue de Dew, le créateur du lecteur Flash que j'ai décrit dans cet article explique comment cela fonctionne et quel est l'origine de ce lecteur.

Embedded RealPlayer Extended Functionality Guide
Tous les détails techniques du lecteur Real Player dans son site offciel d'aide aux utilisateurs. (En anglais)

Support QuickTime
Tous les conseils techniques pour une bonne utilisation de ce lecteur dans le site offciiel. Attention! Dans certaines questions (FAQ) la réponse est en anglais.

Forum Aux Questions sur le Lecteur Windows Media
Une vraie Foire Aux Questions dans le Forum offciel sur ce lecteur.

Télecharger les lecteurs audio
Le très connu magazine informatique O1net vous donne ici la possibilité de télécharger pratiquement tous les lecteurs audio qui existent actuellement sur l'Internet.

Créer un lien vers une bande son en HTLM
Le Web Net Visa service vous porpose dans son site beaucoup de tutoriels sur la programation dans de différents langages informatiques. Ici, ils abordent la question de l'insertion des codes HTLM vers un lien audio. Un autre point de vue pour élargir les connaissances sur ce thème.

   
 
ngc2997
Tourdetoile. index