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:

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

— Timo
source

Vous pouvez essayer github.com/VJAI/musquito

— VJAI

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

<audio> (Navigateurs modernes)
<embed> (Repli)

Codes utilisés

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

— Timo
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
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
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
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
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

Utilisez le fichier audio.js qui est un polyfill pour la <audio>balise avec repli sur flash.

En général, regardez https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills pour les polyfills vers les API HTML 5 .. ( il inclut plus de <audio>polyfills )

— Gabriele Petrioli
source

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
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
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
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
source