Como faço um som quando um elemento muda, como o chat?

Question

Eu quero um som para ser reproduzido quando um elemento muda em uma página. Eu sei como fazer isso, mas não consigo tocar Somente na primeira mudança, e não faça isso mais tarde, até que o usuário concentre a janela (guia) e o obscurece novamente.

Meu código atual:

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

Answer 1

Use uma variável para representar se o som deve ser reproduzido ou não.

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: Eu tenho testou isso funcionando no Firefox, Safari e Opera (exceto a verificação interna). (O Chrome não suporta os formatos WAV Audio, apenas os formatos MP3, AAC ou Ogg Vorbis.)

Answer 2

Se este é o seu único DOMNodeInserted Manipulador, eu simplesmente removia quando o trabalho for feito (tornando todas as inserções futuras mais baratas), assim:

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

Se é não O único manipulador que também é viável, apenas faça uma função nomeada:

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
  });
}