javascript - 当元素发生变化时，我如何播放声音，就像 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
  });
}