Audio HTML5 (audio)

L'audio sur le Web

Jusqu'à présent, il n'existait aucune norme pour la lecture audio sur les pages Web.

Aujourd'hui, la plupart des fichiers audio sont lus via des plug-ins (tels que Flash). Cependant, tous les navigateurs ne disposent pas des mêmes plugins.

HTML5 spécifie une manière standard d'inclure l'audio via l'élément audio.

L'élément audio peut lire des fichiers sonores ou des flux audio.

Formats audio

Actuellement, l'élément audio prend en charge trois formats audio :

Comment ça marche

Pour lire en HTML5 Pour audio, tout ce dont vous avez besoin est : L'attribut

<audio src="song.ogg" controls="controls">
</audio>

control pour ajouter des commandes de lecture, de pause et de volume.

<audio>

L'exemple ci-dessus utilise un fichier Ogg et convient aux navigateurs Firefox, Opera et Chrome.

Pour garantir son fonctionnement avec Safari, le fichier audio doit être de type MP3 ou Wav. L'élément

audio permet plusieurs éléments sources. L'élément source peut lier différents fichiers audio.

Le navigateur utilisera le premier format reconnu :

Instance

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

Internet Explorer

Internet Explorer 8 ne prend pas en charge l'élément audio . Dans IE 9, la prise en charge de l'élément audio sera fournie.

<audio> Attributs de la balise

Formation continue

||

nouveau fichier

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> </body> </html>

soumettre Réinitialiser le code
Opération automatique

Audio HTML5 (audio)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]