Trucsweb.com

Trucsweb.com

HTML

HTML5

RDFFav

HTML5 : La balise Audio

Il était temp, de l’audio sans plugiciel en HTML!mp3, wav, ogg, musiqueHTML5 : La balise Audio

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

  • "Aucun formulaire ni adresse de contact avec CHEZ.com !" Chez.com > Liberty Surf > Tiscali > Alice > Free C'est donc à "Free" qu'il faut désormais s'adresser. ;-)
    64x64
    Doug
    Date (GMT) : 2019-04-07 23:17:48 (UTC +0000)
    Date local : Mon Apr 08 2019 01:26:07 GMT+0200 (Paris, Madrid)
    • Merci pour l'info, il me semble que Free était déjà dans le portrait à l'époque. Vendu depuis un bon 20 ans. Personnellement, mes rares tentatives pour récupérer mon compte n'ont rien donné. J'ai abandonné l'idée depuis longtemps.
      64x64
      oznog
      Date (GMT) : 2019-04-08 00:22:59 (UTC +0000)
      Date local : Sun Apr 07 2019 20:31:18 GMT-0400 (heure d’été de


    • Bonjour j'ai beaucoup de difficulté a trouver un code pour insérer ma radio web sur mon site esce possible de m aider on me dit que mon code doit être uniquement HTTPS uniquement merci de votre aide
      64x64
      GotsRock Radio
      Date (GMT) : 2019-11-16 15:00:54 (UTC +0000)
      Date local : Sat Nov 16 2019 10:04:14 GMT-0500 (Est)
      • Salut, Ce n'est pas un tutoriel sur le streaming en passant... La connexion sécurisée HTTPS n'est pas obligatoire, ça dépend de la technologie. Le HTTPS peut servir pour t'authentifier avec une connexion sécurisée vers un service de streaming, mais pour le streaming lui-même ce n'est pas obligatoire. Ce n'est certainement pas un simple code, il te faut un serveur et une application spécialisée pour le streaming. Et même un protocole de communication dans la plupart des cas. Je ne suis pas spécialiste, mais c'est sur qu'avec Wixsite tu ne peux pas ! À moins que Wixsite offre une solution. Mais étant donné que ça prend beaucoup de bande passante, ce ne sera pas gratuit ! En d'autres mots, à moins d'avoir accès à un serveur Web muni d'un serveur de streaming, ce n'est pas un code qu'il te faut, c'est un service. Spotify offre un service de streaming pour artiste par exemple... Autres exemples : https://www.leanstream.net/ http://www.streamsolution.net/ https://www.muvi.com/ https://www.vplayed.com/ Vive Ozzy et Led Zep ;- )
        64x64
        oznog
        Date (GMT) : 2019-11-16 15:50:16 (UTC +0000)
        Date local : Sat Nov 16 2019 10:53:33 GMT-0500 (heure normale d


      Ajouter un commentaire
      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
      Votre évaluation du tutoriel

      10/10 sur 1 revues.
             Visites : 16767 - Pages vues : 17152
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      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

      Créer un compte

      .
      @