Javascript - 播放變量變化的聲音

Question

我會盡量說明這一點，但基本上我想要做的是爲我的網站創建一個即時消息服務，由一羣人私下使用。我有發送和接收下來拍拍，但我似乎無法找到通知聲音的工作。

我希望在收到新消息時播放通知聲音。我一直在擺弄它大約45分鐘，我試着四處尋找解決方案，但我似乎無法找到任何有用的。

這裏是我的javascript：

function update() { 
    var xmlhttp=new XMLHttpRequest(); 
    var username = "<?php echo $ugt ?>"; 
    var output = ""; 
    var number = 0; 
    var messages = msgarea.childElementCount/2; 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      var response = xmlhttp.responseText.split("\n") 
      var rl = response.length 
      var item = ""; 
      for (var i = 0; i < rl; i++) { 
       item = response[i].split("\\") 
       if (item[1] != undefined) { 
        if (item[0] == username) { 
         output += "<div class=\"msgsentby ext\"><div class='imgprop'></div></div><div class=\"msgc\"> <div class=\"msg msgfrom\">" + item[1] + "</div> <div class=\"msgarr msgarrfrom\"></div> </div>"; 
        } else { 
         output += "<div class=\"msgsentby\"><img src='https://api.lspd-fibo.com/avatar/?gt=" + item[0] + "'></div> <div class=\"msgc\"> <div class=\"msg\">" + item[1] + "</div> <div class=\"msgarr\"></div></div>"; 
         number = msgarea.childElementCount/2; 
        } 
       } 
      } 
      msgarea.innerHTML = output; 

      if (messages < number) { 
       audio.play(); 

       setTimeout(function() { 
        messages = msgarea.childElementCount/2; 
       }, 500); 
      } 

      msgarea.innerHTML += "number: " + number; 
      msgarea.innerHTML += " messages: " + messages; 
     } 

    } 
    xmlhttp.open("GET","get-messages.php?username=" + username,true); 
    xmlhttp.send(); 
} 

function sendmsg() { 
    var message = msginput.value; 
    var delay = 1500; 
    if (message != "") { 
     var username = "<?php echo $ugt ?>"; 
     var xmlhttp=new XMLHttpRequest(); 
     xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {} 
     } 

     message = escapehtml(message) 
     msgarea.innerHTML += "<div class=\"msgc\" style=\"margin-bottom: 30px;\"> <div class=\"msg msgfrom sending\">" + message + "</div> <div class=\"msgarr msgarrfrom\"></div> <div class=\"msgsentby msgsentbyfrom\">Sending...</div> </div>"; 
     msginput.value = ""; 

     var objDiv = document.getElementById("msg-area"); 
     objDiv.scrollTop = objDiv.scrollHeight; 

     xmlhttp.open("GET","update-messages.php?username=" + username + "&message=" + message,true); 
     xmlhttp.send(); 

     setTimeout(function() { 
      var objDiv = document.getElementById("msg-area"); 
      objDiv.scrollTop = objDiv.scrollHeight; 
     }, delay); 

     xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
       var objDiv = document.getElementById("msg-area"); 
       objDiv.scrollTop = objDiv.scrollHeight; 
      } 
     } 
    } 
} 

我道歉，如果這是一個有點凌亂，但這是我的工作。我很欣賞

// EDIT 1

就個人而言，我在想什麼可以工作，是計算所有消息的網頁時就裝的任何援助，任何人都可以提前:)提供，每時間腳本刷新和檢測到一個新的數字，發出聲音..我試圖讓這種特殊的方法工作，也沒有用，但這可能是由於我在這個過程中缺乏知識。

// EDIT 2

我已經編輯我的JavaScript與我一直試圖在此期間的工作。

Answer 1

我已經採取了你的代碼，動了幾變量聲明並切換到使用Array.prototype.forEach()所以我們沒有處理手動遞增索引......這對我的作品......

function update() { 
 
    var xmlhttp=new XMLHttpRequest(); 
 
    var username = "Fred"; 
 
    var output = ""; 
 
    var number = 0; 
 
    var oldVar; //initialize here instead of after forEach 
 

 
    xmlhttp.onreadystatechange=function() { 
 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
 
      var response = xmlhttp.responseText.split("\n") 
 
      var rl = response.length 
 
      var item; \t //just declare array here but don't need to set value 
 
      response.forEach(function(responseLine,index) { 
 
       item = responseLine.split("\\") 
 
       if (item[1] != undefined) { 
 
        number++; 
 
        if (item[0] == username) { 
 
         output += "<div class=\"msgsentby\"><div class='imgprop'></div></div><div class=\"msgc\"> <div class=\"msg msgfrom\">" + item[1] + "</div> <div class=\"msgarr msgarrfrom\"></div> </div>"; 
 
        } else { 
 
         output += "<div class=\"msgsentby\"><img src='https://api.lspd-fibo.com/avatar/?gt=" + item[0] + "'></div> <div class=\"msgc\"> <div class=\"msg\">" + item[1] + "</div> <div class=\"msgarr\"></div></div>"; 
 
        } 
 
       } 
 
      }); 
 
      if (oldVar != number) { 
 
       var audio = new Audio('notification.mp3'); 
 
       audio.play(); 
 
      } 
 
      msgarea.innerHTML = output; 
 
      //removed var keyword here so we don't re-declare it each time 
 
      oldVar = number; 
 
     } 
 

 
    } 
 
    xmlhttp.open("GET","get-messages.php?username=" + username,true); 
 
    xmlhttp.send(); 
 
}