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