如何在元素更改時播放聲音，例如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
  });
}