¿Cómo reproducir un sonido de notificación en sitios web?

108

Cuando ocurre un evento determinado, quiero que mi sitio web reproduzca un sonido de notificación breve para el usuario.

El sonido no debería iniciarse automáticamente (instantáneamente) cuando se abre el sitio web. En su lugar, debe reproducirse a pedido a través de JavaScript (cuando ese evento ocurre).

Es importante que esto también funcione en navegadores más antiguos (IE6 y similares).

Entonces, básicamente hay dos preguntas:

  1. ¿Qué códec debo utilizar?
  2. ¿Cuál es la mejor práctica para incrustar el archivo de audio? ( <embed>vs. <object>vs. Flash vs. <audio>)
javascript html audio notifications html5-audio Timo
fuente
Puede probar github.com/VJAI/musquito
VJAI

Respuestas:

98

Esta solución funciona en prácticamente todos los navegadores (incluso sin Flash instalado):

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

Soporte de navegador

Códigos usados

  • MP3 para Chrome, Safari e Internet Explorer.
  • OGG para Firefox y Opera.
Timo
fuente
Buena respuesta. En este caso, el sonido se reproduce instantáneamente cuando se abre la página, pero supongo que muestra cómo, solo con fines de demostración.
Stefan
@ Stefan Eso es correcto pero puede resultar confuso. Eliminaré eso de mi respuesta. Gracias por la pista.
Timo
Muchas gracias por la solución @valmar
Jagdeep Singh
@DavidLarsson Porque hay algunos navegadores que no pueden leer ciertos códecs.
Timo
2
No pude hacerlo funcionar con mi versión de Internet Explorer 8.
Md. Arafat Al Mahmud
83

A partir de 2016, lo siguiente será suficiente (ni siquiera necesita incrustar):

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

Vea más aquí .

Weltschmerz
fuente
Y quizás también verifique si Audio está definido antes de hacer esto.
Christophe Roussy
1
Esta es una gran respuesta, muy simple y funciona perfectamente.
Polaris
3
Ya no funciona, lo tengoUncaught (in promise) DOMException
jack blank
2
Lo probé en la última versión de Chrome (versión 74.0.3729.169) y me funciona.
weltschmerz
funciona correctamente en Chrome, FF y Opera y es un enfoque mucho mejor que la respuesta aceptada, ya que esa respuesta sigue agregando la etiqueta de audio a la etiqueta de su cuerpo, ya que la secuencia de comandos de notificaciones probablemente se llamará en intervalos
Muhammad Omer Aslam
16

Un complemento más, para reproducir sonidos de notificación en sitios web: Ion.Sound

Ventajas:

  • Complemento de JavaScript para reproducir sonidos basados ​​en Web Audio API con respaldo a HTML5 Audio.
  • El complemento funciona en los navegadores de escritorio y móviles más populares y se puede usar en todas partes, desde sitios web comunes hasta juegos de navegador.
  • Soporte de audio-sprites incluido.
  • Sin dependencias (no se requiere jQuery).
  • 25 sonidos gratuitos incluidos.

Configurar complemento:

// 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
fuente
4

¿Qué tal el reproductor multimedia de yahoo? Simplemente inserte la biblioteca de yahoo 

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

Y usarlo como

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

Para iniciar automáticamente

$(function() { $("#beep").click(); });
Starx
fuente
También es una buena solución, pero ¿sería posible ocultar ese enlace? Creo que si lo configura display: none, ya no reproducirá el sonido. Además, la biblioteca de medios de Yahoo muestra un pequeño icono de "reproducción" a la izquierda del enlace.
Timo
@valmar: visiblity: hidden;es tu respuesta
Starx
3

Reproducir notificaciones compatibles con varios navegadores

Como lo aconsejó @Tim Tisdall de esta publicación, consulte el complemento Howler.js .

Los navegadores como Chrome deshabilitan la javascriptejecución cuando están minimizados o inactivos para mejorar el rendimiento . Pero esto reproduce sonidos de notificación incluso si el navegador está inactivo o minimizado por el usuario.

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

               sound.play();

La esperanza ayuda a alguien.

shaijut
fuente
¿Cómo "Esto reproduce sonidos de notificación incluso si el navegador está inactivo o minimizado"? El sonido podría reproducirse si se llama cuando la página está inactiva, pero ¿cómo se sound.play()ejecuta el código que llama en primer lugar? ¿Howler pone todos tus setTimeouts en un contenedor?
más elegante
@poshest, no sé cómo se reproduce, puede estar verificando el código fuente o ponerse en contacto con el autor del complemento puede ayudarlo.
shaijut
1
OK gracias. Es solo que mencionó esta característica y vinculó esa otra respuesta de Stackoverflow, pero no se menciona como una característica en la documentación de Howler , así que pensé que sabía algo especial al respecto.
más elegante
2

si desea llamar al evento en el código, la mejor manera de hacerlo es crear un activador porque el navegador no responderá si el usuario no está en la página

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

ahora puedes activar tu botón cuando quieras reproducir sonido 

$('#playSoundBtn').trigger('click');
Sfwan Essam
fuente
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();
}

este código es de talkerscode Para un tutorial completo, visite http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

ramancha
fuente
0

Podemos usar Audio y un objeto juntos como:

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

e incluso agregando addEventListenerpara playyended

Mostafa
fuente
0

Escribí un método funcional limpio para reproducir sonidos:

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
fuente