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

我希望在页面上元素发生变化时播放声音。 我知道如何做到这一点，但我不能让它只在第一次更改时播放，并且不要在以后执行，直到用户聚焦窗口（选项卡）并再次模糊它。

我目前的代码：

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