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上tested this working（除了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
  });
}

如何在元素更改时播放声音，例如SO Chat吗？

2 个答案: