Insérer un lecteur audio dans une page web (2/4)

Ver artículo en español

Les lecteurs audio

Bien qu’il existe plusieurs douzaines de lecteurs audio /multimédia, quand on navigue sur la toile, 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 lecteurdu 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 lechemin 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:

<ahref="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 in sé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.

  • A) La Méthode "EMBED"


L'inclusion d'audio dans cette methode 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 ces posts.


Technorati tags: , ,

Commentaires

Kévin a dit…
Merci pour toutes ces explications :)
Nathie a dit…
Il y a maintenant le lecteur dewplayer en flash, interressant aussi!
José Mª Campo a dit…
En effet, j'en avais déjà parlé en juin 2006 dans mon blogue (en ES) Roa Multimedia. Quant à Dewplayer , il a y aussi toute une section dans ce même blogue.

Articles les plus consultés