Как воспроизвести звук при изменении элемента, например, в SO Chat?

Я хочу, чтобы звук воспроизводился при изменении элемента на странице. Я знаю, как это сделать, но я не могу заставить его играть только при первом изменении, и не делайте этого позже, пока пользователь не закроет окно (вкладку) и не размывает его.

Мой текущий код:

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

Ответ 1

Используйте переменную для представления, должен ли воспроизводиться звук или нет.

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

Изменить: Я проверил эту работу в Firefox, Safari и Opera (за исключением проверки на внутреннем уровне). (Chrome не поддерживает воспроизведение аудиофайлов WAV, только форматы MP3, AAC или Ogg Vorbis.)

Ответ 2

Если это ваш единственный обработчик DOMNodeInserted, я просто удалю его, когда работа будет выполнена (что сделает все будущие вставки более дешевыми), например:

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

Если это не единственный обработчик, который тоже работает, просто сделайте его именованной функцией:

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