如何在元素更改时播放声音,例如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 格式。）