Comment jouer un son de notification sur les sites Web?

108

Lorsqu'un certain événement se produit, je souhaite que mon site Web diffuse un bref son de notification à l'utilisateur.

Le son ne doit pas démarrer automatiquement (instantanément) lorsque le site Web est ouvert. Au lieu de cela, il devrait être joué à la demande via JavaScript (lorsque cet événement se produit).

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

Donc, fondamentalement, 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>)
javascript html audio notifications html5-audio Timo
la source
Vous pouvez essayer github.com/VJAI/musquito
VJAI

Réponses:

98

Cette solution fonctionne sur à peu près tous les navigateurs (même sans Flash installé):

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      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>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

Prise en charge du navigateur

Codes utilisés

  • MP3 pour Chrome, Safari et Internet Explorer.
  • OGG pour Firefox et Opera.
Timo
la source
Bonne réponse. Dans ce cas, le son joue instantanément lorsque la page est ouverte - mais je suppose que vous montrez comment, juste à des fins de démonstration.
Stefan
@Stefan C'est correct mais peut être déroutant. Je vais supprimer cela de ma réponse. Merci pour l'indice.
Timo
Merci beaucoup pour la solution @valmar
Jagdeep Singh
@DavidLarsson Parce que certains navigateurs ne peuvent pas lire certains codecs.
Timo
2
Je n'ai pas réussi à le faire fonctionner avec ma version d'Internet Explorer 8.
Md. Arafat Al Mahmud
83

À partir de 2016, les éléments suivants suffiront (vous n'avez même pas besoin d'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();

En savoir plus ici .

Weltschmerz
la source
Et peut-être aussi vérifier si l'audio est défini avant de faire cela.
Christophe Roussy
1
C'est une excellente réponse, si simple et fonctionne parfaitement.
Polaris
3
Ne fonctionne plus je reçoisUncaught (in promise) DOMException
jack blank
2
Je viens de l'essayer sur le dernier Chrome (version 74.0.3729.169) et cela fonctionne pour moi.
weltschmerz
cela fonctionne correctement sur chrome, FF et opéra et constitue une bien meilleure approche que la réponse acceptée car cette réponse continue d'ajouter la balise audio à votre balise corporelle car le script de notifications sera très probablement appelé par intervalles
Muhammad Omer Aslam
16

Un autre plugin, pour lire les sons de notification sur les sites Web: Ion.Sound

Avantages:

  • Plug-in JavaScript pour jouer des sons basés sur l'API Web Audio avec retour à HTML5 Audio.
  • 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.
  • Prise en charge des sprites audio 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");
Cassio Landim
la source
4

Que diriez-vous du lecteur multimédia de Yahoo, il suffit d'intégrer la bibliothèque de Yahoo 

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Et utilisez-le comme

<a id="beep" href="song.mp3">Play Song</a>

Pour démarrer automatiquement

$(function() { $("#beep").click(); });
Starx
la source
Aussi une belle solution mais serait-il possible de cacher ce lien? Je pense que si vous vous y mettez display: none, il ne jouera plus le son. De plus, la médiathèque Yahoo affiche une petite icône «lecture» à gauche du lien.
Timo
@valmar: visiblity: hidden;est votre réponse
Starx
3

Lire des notifications compatibles avec tous les navigateurs

Comme conseillé par @Tim Tisdall à partir de ce post, vérifiez le plugin Howler.js .

Les navigateurs comme Chrome désactive l' javascriptexécution lorsqu'ils sont réduits ou inactifs pour améliorer les performances . Mais cela joue 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();

L'espoir aide quelqu'un.

shaijut
la source
Comment "Cela joue les sons de notification même si le navigateur est inactif ou réduit"? Le son peut jouer s'il est appelé lorsque la page est en veille, mais comment le code qui appelle sound.play()s'exécute-t-il en premier lieu? Howler met-il tous vos setTimeouts dans un wrapper?
chic du
@poshest, je ne sais pas comment il joue, peut-être vérifier le code source ou contacter l'auteur du plugin peut vous aider.
shaijut
1
OK merci. C'est juste que vous avez mentionné cette fonctionnalité et lié cette autre réponse Stackoverflow, mais elle n'est pas mentionnée comme une fonctionnalité dans la documentation Howler , donc je pensais que vous saviez quelque chose de spécial à ce sujet.
chic du
2

si vous souhaitez appeler un événement sur le code La meilleure façon de le faire est de créer un déclencheur car le navigateur ne répondra pas si l'utilisateur n'est pas sur la page

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

maintenant vous pouvez déclencher votre bouton lorsque vous voulez jouer du son 

$('#playSoundBtn').trigger('click');
Sfwan Essam
la source
0 
var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

ce code provient de talkerscode.Pour un tutoriel complet, visitez http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

ramancha
la source
0

Nous pouvons simplement utiliser l'audio et un objet ensemble comme:

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

et même en ajoutant addEventListenerpour playetended

Mostafa
la source
0

J'ai écrit une méthode fonctionnelle propre pour jouer des sons:

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}
Jack
la source