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

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

mutation-events html5-audio html5 jquery javascript

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

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

我的当前代码:

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

2 回复 | 直到 11 年前

PleaseStand 14 年前

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

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

Nick Craver 14 年前

如果这是你唯一的 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
  });
}

推荐文章

Ras · 如何仅在第一次播放声音为true后为false值

7 年前

Judah Gabriel Himango · 在我的Windows应用商店HTML5应用程序中启用后台音频

7 年前

Alex · 基于SQL id的HTML 5音频播放

7 年前

Marco · 如何在动态创建时检测音频文件的结尾?

7 年前

Mang Trinh Gia · 无法在javascript(仅IOS)中设置音频的currentTime[重复]

7 年前

Derek Lawrence · 音频插孔拔出事件

7 年前

Martin Zahariev · 使用按键向下播放音频

7 年前

Ushida · 在保持其onclick事件的同时切换另一个按钮

7 年前

Run · HTML5音频在Opera和Safari上不起作用?

7 年前

maracuja-juice · 创建音频-网络的无缝循环

7 年前