HTML - Audio

  »   HTML  »   Tutoriel HTML - Insérer du son et de la musique dans des pages HTML

Il y a quelques temps il était assez compliqué d'insérer de la musique ou du son dans une page internet. Maintenant, ce problème est résolu, ajouter du son étant assez simple.

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

Il est recommandé que la hauteur et la largeur soient directement proportionnelles pour éviter les problèmes.

Pour cacher le lecteur la valeur de l'attribut hidden (qui est false pour le moment) sera remplacée par true. Cela est fait si vous êtes absolument sûr que l'utilisateur ne voudra pas stopper le son.

Contrôler et manipuler le lecteur audio

Jetons un oeil à l'exemple ci-dessus:

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />
  • autostart - définit si le son démarrera immédiatement après que la page internet soit chargée. Peut avoir la valeur true ou false.
  • loop - définit si le son sera joué en continu. Peut avoir la valeur true ou false.
  • volume - peut avoir n'importe quelle valeur entre 1 et 100.

Vous pouvez jouer un peu avec ces attributs pour mieux les mémoriser et les comprendre, gardez aussi à l'esprit qu'un volume élevé peut être dérangeant pour l'utilisateur.

HTML 5 Balise audio

Avec l'introduction de HTML5, la balise audio s'est développée très rapidement et est très bien supportée par les navigateurs actuels. La balise audio est utilisée pour ajouter du son et de la musique à la page html. Pour le moment la balise audio supporte 3 types de fichiers audio:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg
html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Votre navigateur ne supporte pas la balise audio.
</audio>

Demo

NavigateurMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

Ici vous pouvez trouver un simple mais puissant générateur pour la balise audio html5