Comment faire jouer un son de notification sur les sites web ?

Question

Lorsqu'un certain événement se produit, je veux que mon site Web émette une courte notification sonore à l'intention de l'utilisateur.

Le son doit pas se lancer automatiquement (instantanément) à l'ouverture du site Web. Au lieu de cela, il doit être lu à la demande via JavaScript (lorsque cet événement précis se produit).

Il est important que cela fonctionne également sur les anciens navigateurs (IE6 et autres).

Donc, en fait, il y a deux questions :

1. Quel codec dois-je utiliser ?
2. Quelle est la meilleure pratique pour intégrer le fichier audio ? ( <embed> vs. <object> vs. Flash vs. <audio> )

Answer 1

Solution 2021

function playSound(url) {
  const audio = new Audio(url);
  audio.play();
}

<button onclick="playSound('https://your-file.mp3');">Play</button>  

Support des navigateurs

Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome

Support des codecs

Utilisez simplement le MP3

---

Ancienne solution

(pour les anciens navigateurs)

function playSound(filename){
  var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
  var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
  var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
  document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}

<button onclick="playSound('bing');">Play</button>  
<div id="sound"></div>

Support des navigateurs

• <audio> (Navigateurs modernes)
• <embed > (Fallback)

Codes utilisés

• MP3 pour Chrome, Safari et Internet Explorer.
• OGG pour Firefox et Opera.

Answer 2

Depuis 2016, les éléments suivants suffisent (il n'est même pas nécessaire de les intégrer) :

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

Voir plus ici .

Answer 3

Un autre plugin, pour jouer des sons de notification sur les sites web : Ion.Sound

• Démonstration de base
• Démo avancée
• Page GitHub de Ion.Sound

Avantages :

• Plugin JavaScript pour la lecture de sons basés sur l'API audio Web, avec repli sur l'audio HTML5.
• Le plugin fonctionne sur les navigateurs de bureau et mobiles les plus populaires et peut être utilisé partout, des sites Web courants aux jeux par navigateur.
• Support audio-sprites inclus.
• Aucune dépendance (jQuery n'est pas nécessaire).
• 25 sons gratuits inclus.

Configurer le plugin :

// set up config
ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

// And play sound!
ion.sound.play("my_cool_sound");

Answer 4

Jouer des notifications compatibles avec les différents navigateurs

Comme conseillé par @Tim Tisdall de ce poste, chèque Howler.js Plugin.

Les navigateurs comme chrome désactivent javascript exécution lorsqu'elle est minimisée ou inactive pour performance améliorations. Mais il émet des sons de notification même si le navigateur est inactif ou réduit par l'utilisateur.

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

J'espère que cela aidera quelqu'un.

Answer 5

Si vous souhaitez automatiser le processus via JS :

Inclure quelque part dans le html :

<button onclick="playSound();" id="soundBtn">Play</button>  

et le cacher via js :

<script type="text/javascript">

document.getElementById('soundBtn').style.visibility='hidden';

function performSound(){
var soundButton = document.getElementById("soundBtn");
soundButton.click();
}

function playSound() {
      const audio = new Audio("alarm.mp3");
      audio.play();
    }

</script>

si vous voulez jouer le son, il suffit d'appeler performSound() quelque part !