Derniers tutoriels de développement web

HTML5 Audio


HTML5 offre un standard pour la lecture de fichiers audio.

HTML5 Audio est un sujet de la spécification HTML5, incorporant l'entrée audio, la lecture et la synthèse, ainsi que la parole au texte, dans le navigateur.


Audio sur le Web

Avant HTML5, il n'y avait pas de norme pour la lecture de fichiers audio sur une page Web.

Avant HTML5, les fichiers audio ne peuvent être lus avec un plug-in (like flash) .

Le HTML5 <audio> élément spécifie une méthode standard pour intégrer l' audio dans une page Web.


Support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend en charge complètement le <audio> élément.

Élément
<audio> 4.0 9.0 3.5 4.0 10.5

Le code HTML <audio> Element

Pour lire un fichier audio au format HTML, utilisez le <audio> élément:

Exemple

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Essayez vous - même »

L'élément <audio> représente un son ou un flux audio. Il est couramment utilisé pour lire un seul fichier audio dans une page Web, montrant un widget GUI avec des commandes de lecture / pause / volume.

L'élément <audio> a ces attributs:

attributs globaux (accesskey, classe, contenteditable, ContextMenu, dir, draggable, dropzone, caché, id, lang, vérification orthographique, le style, tabindex, titre, traduire)

autoplay = « AutoPlay » ou « » (chaîne vide) ou vide Charge le User-Agent pour commencer automatiquement la lecture du flux audio dès qu'il peut le faire sans arrêter.

précharge = « none » ou « métadonnées » ou « auto » ou « » (chaîne vide) ou vide Représente un indice à l'agent utilisateur de savoir si le téléchargement optimiste du flux audio lui-même ou ses métadonnées est jugé utile.

« None »: Conseils à l'agent utilisateur que l'utilisateur ne devrait avoir besoin du flux audio, ou en minimisant le trafic inutile est souhaitable.

« Métadonnées »: Conseils à l'agent utilisateur que l'utilisateur ne devrait avoir besoin du flux audio, mais que l'extraction de ses métadonnées (durée et ainsi de suite) est souhaitable.

« Auto »: Conseils à l'User-Agent que le téléchargement du flux audio avec optimisme l'ensemble est considéré comme souhaitable.

contrôles = « contrôles » ou « » (chaîne vide) ou vide Charge le User-Agent pour exposer une interface utilisateur pour contrôler la lecture du flux audio.

loop = « boucle » ou « » (chaîne vide) ou vide Charge le User-Agent de demander revenir au début du flux audio à atteindre la fin. mediagroup = chaîne Indique l'User-Agent pour relier plusieurs vidéos et / ou audio ensemble.

mis en sourdine = « coupé » ou « » (chaîne vide) ou vide Représente l'état par défaut du flux audio, remplaçant potentiellement les préférences de l'utilisateur. src = non vide [URL] potentiellement entouré par des espaces L'URL du flux audio.


HTML Audio - Comment ça marche?

Les controls d' attributs ajoute des commandes audio, comme lecture, pause, et le volume.

Texte entre le <audio> et </audio> balises affiche dans les navigateurs qui ne prennent pas en charge la <audio> élément.

Plusieurs <source> éléments peuvent créer un lien vers différents fichiers audio. Le navigateur utilise le premier format reconnu.


HTML audio - Prise en charge du navigateur

À l' heure actuelle, il existe 3 formats de fichiers pris en charge pour le <audio> élément: MP3, Wav, Ogg et:

Navigateur MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Audio - Types de support

Format de fichier Type de support
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML Audio - Méthodes, propriétés et événements

HTML5 définit les méthodes DOM, les propriétés et événements pour le <audio> élément.

Cela vous permet de charger, lire et mettre en pause des sons, ainsi que la durée spécifiée et le volume.

Il y a aussi des événements DOM qui peuvent vous avertisse lorsqu'un audio commence à jouer, est mis en pause, etc.

Pour une référence DOM complète, consultez notre DOM HTML5 Audio / Vidéo Référence .


HTML5 Audio Tags

Marque La description
<audio> Définit le contenu sonore
<source> Définit plusieurs ressources multimédias pour les éléments multimédias, tels que <video> et <audio>

HTML Audio - Speech API Web

L'API Web Speech vise à fournir une méthode d'entrée alternative pour les applications Web (sans l'aide d'un clavier). Avec cette API, les développeurs peuvent donner applications web la possibilité de transcrire la voix au texte, du microphone de l'ordinateur. L'audio enregistré est envoyé aux serveurs vocaux pour la transcription, après quoi le texte est tapé à la machine pour l'utilisateur. L'API est elle-même agnostique de la mise en œuvre de la reconnaissance vocale sous-jacente et peut prendre en charge à la fois serveur basé ainsi que reconnaisseurs embarqués. Le groupe Incubateur discours HTML a proposé la mise en œuvre de la technologie vocale audio dans les navigateurs sous la forme d'uniforme, les API multi-plateforme. L'API contient à la fois:

  • Discours API d'entrée
  • Texte à Speech API