代码之家 › 专栏 › 技术社区 › alexia Greg Guida

当一个元素发生变化时,我如何播放声音,就像聊天一样?

mutation-events html5-audio html5 jquery javascript

10

alexia Greg Guida · 技术社区 · 13 年前

当一个元素在页面上改变时,我想播放一个声音。我知道怎么做,但我不能让它玩 只有第一次换车时 ,以后不要这样做,直到用户聚焦窗口(选项卡)并再次模糊。

我的当前代码:

var notif = new Audio('http://cycle1500.com/sounds/infbego.wav');
if (window.innerHeight === window.outerHeight) {
  $(window).bind('DOMNodeInserted', function() {
      notif.play();
  });
}

2 回复 | 直到 11 年前

1

4

PleaseStand 13 年前

使用变量来表示是否应播放声音。

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格式。)

2

0

Nick Craver 13 年前

如果这是你唯一的 DOMNodeInserted handler,我只在完成工作后移除它(使以后的插入更便宜),如下所示:

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