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('');
if (window.innerHeight === window.outerHeight) {
  $(window).bind('DOMNodeInserted', function() {;


@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('');
if (window.innerHeight === window.outerHeight) {
    'DOMNodeInserted': function() {; 

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

notif = new Audio('');
if (window.innerHeight === window.outerHeight) {
  function play() {; $(window).unbind('DOMNodeInserted', play); }
    '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('');
if (window.innerHeight === window.outerHeight) {
    'DOMNodeInserted': function() {
      if (shouldPlayAlertSound) {;
      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 &&;. But even if I replace this with if (shouldPlayAlertSound === true) {; }, 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!

Related Questions

Sponsored Content

93 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6260318 View
  • 7817 Score
  • 93 Answer
  • Tags:   javascript arrays

78 Answered Questions

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

56 Answered Questions

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

13 Answered Questions

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

30 Answered Questions

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

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2510373 View
  • 2682 Score
  • 30 Answer
  • Tags:   javascript html dom

14 Answered Questions

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

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1068155 View
  • 1634 Score
  • 14 Answer
  • Tags:   javascript jquery html

25 Answered Questions

[SOLVED] How does JavaScript .prototype work?

14 Answered Questions

[SOLVED] How does data binding work in AngularJS?

17 Answered Questions

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

Sponsored Content