Master HTML5 Audio Markup - mannequins

Simplement dit, il existe deux éléments médias principaux pour HTML5, qui sont tous deux absurdement simples à utiliser. L'élément audio est nommé et l'élément vidéo est nommé. En HTML5, le navigateur détermine quels lecteurs sont intégrés et donc utilisables. Vous devez planifier votre utilisation de l'audio et de la vidéo en conséquence.

Voici une version simplifiée du balisage audio:

L'entrée des contrôles contient un certain nombre d'attributs de contrôle que vous pouvez utiliser pour gérer la lecture et le comportement audio, comme suit (présentés par ordre alphabétique):

lecture automatique: Indique au navigateur de commencer à jouer audio dès que le fichier objet est chargé. La seule valeur légale pour cet attribut est autoplay, mais aucune valeur n'est strictement requise en HTML5. Commandes

• : Indique au navigateur d'afficher un widget à l'écran pour contrôler la lecture audio (généralement avec les boutons Pause / Lecture, une barre de progression et les commandes de volume). Comme avec autoplay, la seule valeur légale pour cet attribut est controls, mais aucune valeur n'est strictement requise en HTML5.

• loop: indique au navigateur de revenir au début et de continuer à jouer quand il arrive à la fin du fichier objet. Ici aussi, la seule valeur légale pour cet attribut est loop, et aucune valeur n'est strictement requise.

• preload: indique au navigateur s'il doit précharger le fichier objet et, dans l'affirmative, comment il doit être préchargé. Les valeurs possibles incluent

• none: Ne charge aucune partie du fichier audio lorsque la page charge

  • métadonnées: Charge uniquement les métadonnées audio lors du chargement de la page. Il configure également la lecture mais n'a pas encore de données chargées.

  • auto: Charge le fichier audio entier lorsque la page charge

  • L'attribut preload est ignoré si autoplay est présent.

  La section Alternatives est très intéressante et très utile pour supporter les anciens navigateurs. Les visiteurs de pages voient ou exécutent le contenu des balises uniquement si leur navigateur ne prend pas en charge l'élément audio (car leur navigateur ignore les balises qu'il ne reconnaît pas), mais les navigateurs HTML5 sont suffisamment intelligents pour ignorer ces directions alternatives.

C'est ici que vous pouvez appeler des plug-ins pour des lecteurs spécifiques et des formats de fichiers différents car vous savez que seuls les visiteurs qui ne peuvent pas utiliser les capacités de lecture audio HTML5 intégrées rencontreront ce balisage.

L'exemple ici en profite pour vous montrer comment appeler d'autres formats de fichiers au cas où votre format choisi ne pourrait pas être lu. Comme indiqué, un navigateur qui manque de support audio HTML5 affichera le mot

Alternatives à l'écran! Voici un balisage qui ne sera pas lu. ogg fichier audio jusqu'à ce que l'utilisateur déclenche le bouton Lecture sur les contrôles à l'écran, avec une boucle continue tant que la page reste à l'écran. Il fournit également des alternatives WAV et MP3 pour les navigateurs plus anciens:

Le navigateur ne prend pas en charge l'audio HTML5; lecture alternative fournie.

Par défaut, si vous n'incluez pas d'attribut src dans la balise d'ouverture, la cible du premier élément est lue dans un navigateur qui reconnaît l'élément HTML5. Cette configuration facilite l'empilement de vos options de lecture dans la section Alternatives, en commençant par celle que vous voulez le plus, et ainsi de suite.

Si les joueurs des trois formats ne sont pas disponibles, aucun son ne sera joué. Dès que le navigateur trouve un lecteur correspondant au type de fichier son (.ogg en premier,.wav en second, mp3 en troisième), le navigateur utilise le lecteur pour lire le son, puis le navigateur continue à traiter le reste du fichier HTML. document qui suit.

Cette figure montre ce que cette page dans un fichier HTML correctement construit avec du texte et des informations supplémentaires ressemble à l'écran dans Chrome.