Как воспроизвести звук, когда элемент изменяется, например, SO Chat?

Question

Я хочу, чтобы звук воспроизводился при изменении элемента на странице. Я знаю, как это сделать, но я не могу заставить его играть только при первом изменении, и не делайте этого позже, пока пользователь не закроет окно (вкладку) и не размывает его снова.

Мой текущий код:

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

Edit: Я tested this working на 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 
    }); 
}