Maison > interface Web > tutoriel HTML > Comment intégrer l'audio en HTML à l'aide de l'AUDIO & GT; étiqueter?

Comment intégrer l'audio en HTML à l'aide de l'AUDIO & GT; étiqueter?

Emily Anne Brown
Libérer: 2025-03-20 15:54:31
original
488 Les gens l'ont consulté

Comment intégrez-vous l'audio dans HTML à l'aide de la balise

Pour intégrer l'audio dans HTML à l'aide de la balise

 <code class="html"><audio src="path/to/your/audiofile.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio></code>
Copier après la connexion

Vous pouvez également fournir plusieurs sources pour garantir la compatibilité entre différents navigateurs en utilisant la balise à l'intérieur de la balise

 <code class="html"><audio> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio></code>
Copier après la connexion

Cette méthode permet au navigateur de choisir le premier format audio pris en charge.

Quels sont les différents formats audio pris en charge par la balise HTML

La balise HTML

  • MP3 (.mp3) : largement pris en charge dans la plupart des navigateurs, notamment Chrome, Firefox, Safari et Edge. Le type MIME pour MP3 est audio/mpeg .
  • Ogg Vorbis (.ogg) : soutenu par Firefox, Chrome et Opera, mais pas par Safari ou Internet Explorer. Le type MIME pour OGG Vorbis est audio/ogg .
  • WAV (.wav) : Soutenu par Chrome, Firefox et Safari, mais pas par Internet Explorer. Le type MIME pour WAV est audio/wav .
  • AAC (.M4A) : Soutenu par Safari et Chrome, mais pas par Firefox ou Internet Explorer. Le type MIME pour AAC est audio/aac .

Pour garantir une large compatibilité, il est de bonne pratique d'offrir plusieurs sources au sein de la balise .

Comment pouvez-vous ajouter des contrôles à un lecteur audio dans HTML à l'aide de la balise ?

Pour ajouter des contrôles à un lecteur audio dans HTML à l'aide de la balise , vous pouvez utiliser l'attribut controls . Cet attribut permet l'ensemble de contrôles par défaut (play, pause, volume et recherche) fourni par le navigateur. Voici comment vous pouvez le faire:

 <code class="html"><audio src="path/to/your/audiofile.mp3" type="audio/mpeg" controls> Your browser does not support the audio element. </audio></code>
Copier après la connexion

L'attribut controls est un attribut booléen, ce qui signifie que vous n'avez qu'à l'inclure dans la balise pour l'activer. Si vous souhaitez personnaliser les contrôles, vous devrez peut-être utiliser JavaScript et CSS pour créer une interface de lecteur personnalisée.

Quelles sont les options de secours pour les navigateurs qui ne prennent pas en charge la balise HTML

Pour les navigateurs qui ne prennent pas en charge la balise HTML

 <code class="html"><audio> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> <p>Your browser does not support the audio element. You can <a href="path/to/your/audiofile.mp3">download the audio file</a> instead.</p> </source></source></audio></code>
Copier après la connexion

Dans cet exemple, les utilisateurs avec des navigateurs qui ne prennent pas en charge la balise

 <code class="html"><audio> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> <object type="application/x-shockwave-flash" data="flashplayer.swf"> <param name="movie" value="flashplayer.swf"> <param name="flashvars" value="audioFile=path/to/your/audiofile.mp3"> <p>Your browser does not support the audio element or Flash. You can <a href="path/to/your/audiofile.mp3">download the audio file</a> instead.</p> </object> </source></source></audio></code>
Copier après la connexion

Cette approche complète garantit que les utilisateurs peuvent accéder au contenu audio quelles que soient les capacités de leur navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal