By nyuszika7h


2010-11-24 12:37:12 8 Comments

I want a sound to play when an element changes on a page. I know how to do this, but I can't get it to play only on the first change, and don't do it later, until the user focuses the window (tab) and blurs it again.

My current code:

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

2 comments

@Nick Craver 2010-11-24 13:45:00

If this is your only DOMNodeInserted handler, I'd just remove it when the work is done (making all future insertions cheaper), like this:

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

If it's not the only handler that's workable too, just make it a named function:

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

@PleaseStand 2010-11-24 12:48:16

Use a variable to represent whether the sound should be played or not.

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

Edit: I've tested this working on Firefox, Safari, and Opera (except for the innerHeight check). (Chrome doesn't support playing WAV audio files, only the MP3, AAC, or Ogg Vorbis formats.)

@nyuszika7h 2010-11-24 13:03:42

This code seems to be fine, and jsLint only shows up only one error: Problem at line 6 character 48: Expected an assignment or function call and instead saw an expression. shouldPlayAlertSound && notif.play();. But even if I replace this with if (shouldPlayAlertSound === true) { notif.play(); }, it does not work. :/

@nyuszika7h 2010-11-27 12:26:29

Thanks! I've made minor fixes to your new code, and now it's doing exactly what I wanted! jsfiddle.net/Nyuszika7H/hpRHR

Related Questions

Sponsored Content

26 Answered Questions

[SOLVED] How does JavaScript .prototype work?

59 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

81 Answered Questions

[SOLVED] How do I detect a click outside an element?

32 Answered Questions

[SOLVED] How to create an HTML button that acts like a link?

  • 2010-05-25 16:39:47
  • Andrew
  • 6522301 View
  • 1990 Score
  • 32 Answer
  • Tags:   html

12 Answered Questions

[SOLVED] How to change the href for a hyperlink using jQuery

15 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1147663 View
  • 1725 Score
  • 15 Answer
  • Tags:   javascript jquery html

32 Answered Questions

[SOLVED] How can I change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2667901 View
  • 2842 Score
  • 32 Answer
  • Tags:   javascript html dom

13 Answered Questions

[SOLVED] How can I select an element with multiple classes in jQuery?

17 Answered Questions

[SOLVED] How to decide when to use Node.js?

Sponsored Content