Une brève introduction à l'utilisation des balises audio dans les compétences du didacticiel HTML5_html5

Dans les pages Web standard HTML5, nous pouvons utiliser la balise audio pour compléter notre appel et la lecture des sons. Voici les trois formats de base les plus couramment utilisés en HTML5 :

1. Code minimal

Copier le code Le code est le suivant : &lt ;audio src="song.ogg" CONTROLS="controls"> 2 Code avec rappel d'incompatibilité

. Copiez le code Le code est le suivant : Votre navigateur ne prend pas en charge la balise audio.> Le code est le suivant :

Votre navigateur ne prend pas en charge la balise audio. Compatibilité navigateur et audio

Tous les fabricants de navigateurs ne sont pas d'accord sur l'utilisation d'un certain format de fichier audio. Pour les images, les fichiers au format PNG, JPEG ou GIF seront chargés sur votre page sur n'importe quel navigateur. Malheureusement, ce n'est pas le cas des fichiers audio. Le tableau 1 présente les formats de fichiers audio pouvant être utilisés dans les pages Web, mais tous les formats ne sont pas disponibles dans tous les navigateurs. Par exemple, les navigateurs Chrome, Internet Explorer 9 (IE9) et Safari ne prennent pas en charge les fichiers WAV, une norme en déclin qui utilise un format non compressé.

Compatibilité du navigateur HTML5 et des formats audio Ne pas avoir de format de fichier commun à utiliser pour chaque navigateur signifie qu'au moins 2/5 des navigateurs ne pourront pas lire certains sons. Il ne s’agit pas d’une question d’intransigeance et d’incapacité des fabricants de navigateurs à se mettre d’accord sur une norme audio unique, mais plutôt d’un problème juridique et financier impliquant des droits de brevet et des redevances. Le format OGG, qui n'est pas limité par les brevets logiciels, vise à résoudre ce problème une fois pour toutes. Cependant, au moment de la rédaction, ni Opera ni Safari ne prennent en charge OGG. Il y a plus de fichiers WAV et MP3 disponibles que de fichiers au format OGG, il ne fait donc aucun doute que les fabricants de navigateurs en ont tenu compte. Le MP3, en tant que standard de facto, est une excellente solution. Solution : utilisez trois types de fichiers et la balise

Compte tenu de la situation actuelle, vous pourriez penser que ce n’est pas encore le moment idéal pour utiliser l’audio sur les pages HTML5. D'une certaine manière, cela peut être vrai, mais HTML5 fournit une solution qui permet à votre navigateur préféré de trouver un format compatible.

Lorsqu'elle est utilisée conjointement avec la balise , la balise Disons que vous êtes un fan de Wagner et que vous souhaitez écouter son opéra La Chevauchée des Valkyries sur une page HTML5. Tout d'abord, vous devez obtenir votre musique sous trois types de fichiers, à savoir OGG, MP3 et WAV. Placez ces fichiers musicaux dans le même dossier que les fichiers HTML5. Ensuite, placez chaque nom de fichier dans une balise distincte, et toutes les balises source du conteneur audio sont composées de , comme indiqué ci-dessous.

Copier le code

Le code est le suivant :

&lt ;source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />

Quel que soit le navigateur utilisé par votre visiteur, il sélectionnera automatiquement le premier type de fichier qu'il lit et jouera le son pour vous. Commandes audio du navigateur : il n'y en a pas deux exactement identiques Une fois que vous aurez décidé de diffuser de l'audio sur votre site Web, vous serez confronté à un choix de conception intéressant. Chaque navigateur a une apparence distincte qui donne l'impression qu'il y a eu un effort conscient pour le distinguer.

Tous les navigateurs, à l'exception de Chrome, disposent de commandes de démarrage/pause, d'une barre de progression, d'un curseur, des secondes de lecture, de commandes de volume/muet et affichent également le nombre total de secondes du fichier son. Grâce à la norme HTML5 et à la prise en charge du navigateur, les développeurs peuvent être sûrs que les utilisateurs bénéficieront d'une expérience similaire avec l'audio HTML5, car les commandes du navigateur sont similaires. Vous pouvez également créer des contrôles à l'aide de plug-ins tels que Flash et Silverlight, mais l'expérience peut varier selon les utilisateurs.

Certains navigateurs (comme IE9) ont même leur propre barre de contrôle du son qui s'exécute en dehors du navigateur lui-même. Lorsque les utilisateurs ouvrent un site Web doté de son, ils peuvent contrôler le son à partir de la barre des tâches Windows et pouvoir prévisualiser le son en cours de lecture.

Code HTML (masquer les commandes de lecture)

Copier le code Le code est le suivant : Démonstration de code (masquer les commandes de lecture)

Copier le code Le code est le suivant :

Une brève introduction à l'utilisation des balises audio dans les compétences du didacticiel HTML5_html5

Articles Liés