Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

HTML5

RDFFav

HTML5 : La balise Audio

Il était temp, de l’audio sans plugiciel en HTML!mp3, wav, ogg, musique

Musique en ligne
Feu Musikenligne. Développé au 20e siècle en collaboration avec le graphisme Sha de Freegaia pour ArtProCom.

Poète guitariste bien avant d’être analyste-programmeur, je me souviens des premiers balbutiements du Web et de ma tentative d’y publier mes compositions. Il y a 19 ans c’était essentiellement sur un serveur gratuit, pour la plupart fermés aujourd’hui comme le célèbre multimédia. Mais tout de même, il reste un exemple sur CHEZ.com toujours en ligne (2015). Parce que c’est carrément impossible de modifier ou détruire le site ; -) Sacré Web, cimetière de liens! Aucun formulaire ni adresse de contact avec CHEZ.com! Enfin, tout ça pour dire que le Web de l’époque était très décevant pour un musicien. Ironie du sort, la conception de mon premier site Web professionnel « Musikenligne.com » n’avait pas d’audio non plus! C’est seulement en 1999 que Flash me permit d’ajouter du son, sur le site du Musée du bas-Saint-Laurent.

Il faut se souvenir qu’à cette époque pas si lointaine, l’audio dans une page web était à la merci d’un plugiciel. Si QuickTime a réussi une certaine percée plus ou moins portable, ou encore Real Audio pendant quelques années, c’est davantage Flash de Macromedia qui permettait de diffuser pendant les années 2000 de la musique. Et ça marchait, sur plus de 95 % des navigateurs de la planète! Les navigateurs de l’époque installaient tout simplement le plugiciel Flash (et Shockwave) par défaut! Flash est d’ailleurs toujours utilisé pour lire un format MP3 à l’aide d’un lecteur Flash si jamais le navigateur ne supportait pas la balise audio.

Cette époque est bel et bien révolue, grâce au HTML5 et la balise <audio>. L’idée est simple, une balise <audio> qui propose plusieurs formats. Le navigateur jouera le premier compatible, sinon il affiche « Votre navigateur ne supporte pas la balise <audio> ». Le tout avec une belle barre de contrôle, jouer, pause, chargement, durée, volume etc.

Exemple avec la Bolero de Ravel
<audio preload="auto" controls="controls" type="audio/mpeg">
  <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
  <source type="audio/ogg" src="http://www.archive.org/download/bolero_69/Bolero.ogg">
  Votre navigateur ne supporte pas la vidéo HTML5
  On peut ici placer un lecteur Flash
  pour les navigateurs incompatibles.
</audio>
Attributes de la balise <audio>
Attribut Valeur Description
autoplay autoplay Spécifie si le son doit jouer dès qu’il est disponible.
controls controls Spécifie si la barre de contrôle (play/pause...) est affichée.
loop loop Spécifie si le son doit boucler à l’infinie.
muted muted Spécifie si le son est coupé.
preload auto
metadata
none
Spécifie si le son doit être chargé dès le chargement de la page.
src URL Spécifie si le URL du fichier audio.
Attribut de la balise <source>
Attribute Value Description
media media_query Spécifie le type de ressources
src URL Spécifie l’adresse du fichier
type media_type Spécifie le type de fichier

Compatibilité
NavigateurWavMP3Ogg
Internet Explorer 9NONOUINON
Firefox 5.0OUIOUIOUI
Google Chrome 6OUIOUIOUI
Apple Safari 5OUIOUINON
Opera 10.6OUINONOUI

Internet Explorer 8 et les versions antérieures ne supportent pas la balise <audio>.

DOM et javascript

La balise <audio> a définitivement l’avantage d’être un élément du « document object model » (DOM) à part entière. C’est-à-dire qu’il est possible de manipuler le son en Javascript à l’aide des événements comme tout éléments HTML. Par exemple en ajoutant des « écouteur » (listener) des événements « oncanplay » ou « oncanplaythrough ». Pour savoir si le son a été chargé, ajouter un écouteur pour l’événement « onloadeddata » :

<audio oncanplay="twCanPlay()"
       oncanplaythrough="twCanPlayThrough()"
       onloadeddata="twOnLoadedData()"
       src="fichier.mp3"
       controls>
</audio>

<script>
function twCanPlay() { console.log("Prêt à jouer"); }
function twCanPlayThrough() { console.log("Prêt à jouer au complet"); }
function twOnLoadedData() { console.log("Le fichier est chargé"); }
</script>

Le chargement de son dans le DOM provoque la suite d’événements suivants :

  1. loadstart
  2. durationchange
  3. loadedmetadata
  4. loadeddata
  5. progress
  6. canplay
  7. canplaythrough

Lire le tutoriel « HTML5 - Lecteur audio » pour plus d’informations sur le sujet.

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

10/10 sur 1 revues.
       Visites : 6922 - Pages vues : 7117
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte