¿Cómo reproduzco un sonido cuando un elemento cambia, como lo hace SO Chat?

Quiero un sonido para reproducir cuando un elemento cambia en una página. Sé cómo hacer esto, pero no puedo hacer que juegue solo en el primer cambio, y no lo haga más tarde, hasta que el usuario enfoque la ventana (pestaña) y la desenfoque nuevamente.¿Cómo reproduzco un sonido cuando un elemento cambia, como lo hace SO Chat?

Mi código actual:

var notif = new Audio('http://cycle1500.com/sounds/infbego.wav'); 
if (window.innerHeight === window.outerHeight) { 
    $(window).bind('DOMNodeInserted', function() { 
     notif.play(); 
    }); 
}

Fuente

2010-11-24 nyuszika7h

lo que tienes no debe trabajar, su llamada a un objeto a '.bind()' no está completo ... no es ese throwi ng un error de sintaxis? –

** Reparado. ** ¡Gracias! – nyuszika7h

** Actualización: ** Arreglé la ruta del sonido, estaba mal. Por favor actualiza tus respuestas. Comprobaré las dos respuestas nuevamente más tarde. – nyuszika7h

utilizar una variable para representar si el sonido se debe jugar o no.

var shouldPlayAlertSound = true, 
    notif = new Audio('http://cycle1500.com/sounds/infbego.wav'); 
if (window.innerHeight === window.outerHeight) { 
    $(window).bind({ 
    'DOMNodeInserted': function() { 
     if (shouldPlayAlertSound) { 
     notif.play(); 
     } 
     shouldPlayAlertSound = false; 
    }, blur: function() { 
     shouldPlayAlertSound = true; 
    } 
    }); 
}

Editar: he tested this working en Firefox, Safari y Opera (a excepción de la comprobación innerHeight). (Chrome no admite la reproducción de archivos de audio WAV, solo los formatos MP3, AAC o Ogg Vorbis.)

Fuente

2010-11-24 12:48:16 PleaseStand

Este código parece estar bien, y ** jsLint ** solo muestra un error: * Problema en la línea 6, carácter 48: esperaba una asignación o llamada de función y, en su lugar, vio una expresión. * 'ShouldPlayAlertSound && notif.play() ; '. Pero incluso si reemplazo esto con 'if (shouldPlayAlertSound === true) {notif.play(); } ', no funciona. :/ – nyuszika7h

** ¡Gracias! ** He hecho correcciones menores a su nuevo código, ¡y ahora está haciendo exactamente lo que yo quería! http://jsfiddle.net/Nyuszika7H/hpRHR/ – nyuszika7h

Si este es su único manejador DOMNodeInserted, simplemente lo eliminaría cuando el trabajo haya terminado (haciendo que todo inserciones más baratos), así:

notif = new Audio('http://cycle1500.com/sounds/infbego.wav'); 
if (window.innerHeight === window.outerHeight) { 
    $(window).bind({ 
    'DOMNodeInserted': function() { 
     notif.play(); 
     $(window).unbind('DOMNodeInserted'); 
    } 
    }); 
}

Si es no el único controlador que es viable también, sólo que sea una función llamada:

notif = new Audio('http://cycle1500.com/sounds/infbego.wav'); 
if (window.innerHeight === window.outerHeight) { 
    function play() { notif.play(); $(window).unbind('DOMNodeInserted', play); } 
    $(window).bind({ 
    'DOMNodeInserted': play 
    }); 
}

Fuente

2010-11-24 13:45:00

¿Cómo reproduzco un sonido cuando un elemento cambia, como lo hace SO Chat?

Respuesta

Cuestiones relacionadas