Jouer des sons sur un Site Web

inline Sound

Quand élément sonore est inclus dans une page web, ou dans le cadre d'une page web, on parle de inline Sound.( sons en ligne).
Si vous prévoyez d'utiliser des sons en ligne dans vos applications web, sachez que beaucoup de gens le trouvent ennuyeux. Notez également que certains utilisateurs pourraient avoir désactivé l'option sonore en ligne dans leur navigateur.
Nos meilleurs conseils est de n’inclure le son en ligne que dans les pages web où l'utilisateur s'attend à entendre le son.
Exemple une page qui s'ouvre après que l'utilisateur a cliqué sur un lien pour entendre un enregistrement.

À l'aide d'un Assistant (plug-in)

Une demande d'assistance est un programme qui peut être lancé par le navigateur pour jouer un son « assistant ». Les demandes d'assistance sont appelés Plug-Ins.
Les demandes d'assistance peuvent être lancés à l'aide de balises telque la balise <embed>, la balise <object>, ou la balise <audio> .
L’avantage d'utiliser une application d'assistance, c'est que vous pouvez laisser le contrôle à l'utilisateur de certains (ou touts) les paramètres du lecteur.
La plupart des applications d'assistance permettent (manuellement ou automatiquement) de contrôler les paramètres de volume et d’autres fonctions comme rembobiner, pause, stop et play.

Ajouter ou jouer un son ou une musique à l'aide de la balise <embed>

Le but de la balise <embed> consiste à incorporer des éléments multimédia dans la page web.
Le code suivant affiche un fichier MIDI à intégrer à une page web.

Exemple

Note : La balise <embed> est déconseillée. Il est préférable d'utiliser la balise <object> ou la balise<audio> comme il est recommandé par l'organisation w3c.

Ajouter ou jouer un son ou une musique à l'aide de la balise <object>

Le but de la balise <object>.consiste à incorporer des éléments multimédia dans la page web.
Le code suivant affiche un fichier WAVE intégré à une page web.

Exemple

Ajouter ou jouer un son ou une musique à laide de la blise <audio>

La balise <audio> est l'un des éléments que le HTML5 a ajouté pour permettre l'intégration de fichiers audio dans une page Web. Comme tous les navigateurs ne prennent pas en charge tous les formats audio, le fichier audio est codé à l'aide de codecs spéciaux.
La balise <source> ou l'attribut src est utilisé pour indiquer les variantes d'un même fichier audio. Le chemin d'accès à un fichier audio peut contenir une URL absolue ou relative.

Syntaxe utilisation de la balise <audio>

La balise <audio> se présente sous forme de paires. Le contenu est écrit entre les balises d'ouverture <audio> et de fermeture </audio>.

Exemple html balise <audio>

Code : HTML

📋 Copier le code

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <audio controls>
      <source src="https://www.oujood.com/multimedia/jingle_bells.ogg" type="audio/ogg">
      <source src="https://www.oujood.com/multimedia/audio.mp3" type="audio/mpeg"">
    </audio>
    <p>Cliquer sur le bouton Play pour jouer la musique</p>
  </body>
</html>

L'attribut Loop

L'utilisation de l'attribut loop permet de lire le fichier audio en boucle :

Affichage des commandes du navigateur

Vous pouvez permettre au navigateur d'afficher à l'utilisateur des commandes telles que le volume ou la fonction lecture/pause. Cela se fait à l'aide de l'attribut controls.

Pour plus de détail sur la balise </audio> voir notre référence Balise HTML audio

Ajouter ou jouer un son ou une musique à l'aide d'un lien hypertexte

Si une page web comprend un lien hypertexte vers un fichier multimédia, la plupart des navigateurs utilise une « demande d'assistance » pour lire le fichier.
Le code suivant affiche un lien vers un fichier MIDI. Si un utilisateur clique sur le lien, le navigateur va lancer une application d'assistance, comme Windows Media Player pour lire le fichier MIDI :

Exemple

<a href="https://www.oujood.com/multimedia/audio.mp3">jouer le fichier audéo</a>

Cours precedent:
Formats vidéo

Sommaire de :
tutoriel multimédia

Cours suivant:
Navigateur et vidéos

Par carabde 12 mai 2014 - mis à jour le 23 Janvier 2022

Jouer des sons sur un Site Web

Cours multimédia