SOチャットのように、要素が変更されたときにサウンドを再生するにはどうすればよいですか？

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

編集：私は、Firefox、Safariの、および（innerHeightはチェックを除く）オペラにtested this workingをしました。

Answer 2

これは唯一のDOMNodeInsertedハンドラであれば、作業が完了すると削除されます（すべての未来を作っています）。ChromeはWAVオーディオファイルの再生をサポートしていません（MP3、AAC、またはOgg Vorbisのフォーマットをサポートしていません）。

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