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

Question

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

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

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

Answer 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 (за исключением проверки innerHeight). (Chrome не поддерживает воспроизведение аудиофайлов WAV, только форматы MP3, AAC или Ogg Vorbis.)

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