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

编辑:我有 tested this working在 Firefox、Safari 和 Opera 上(innerHeight 检查除外)。 (Chrome 不支持播放 WAV 音频文件，只支持 MP3、AAC 或 Ogg Vorbis 格式。)