Javascript -在变量变化时播放声音

我会尽可能多地解释这一点，但基本上我想做的是为我的网站创建一个即时通讯服务，供一群人私下使用。我已经完成了发送和接收，但我似乎找不到通知声音的工作。

我想要的是在收到新消息时播放通知声音。我已经摆弄了大约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;
            }
        }
    }
}

如果有点乱，我很抱歉，但这是我必须处理的。我很感激任何可以提前提供帮助的人:)

//编辑1

就我个人而言，我认为可能会起作用，就是计算页面加载时的所有消息，每次脚本刷新并检测到新数字时，发出声音。我试过让这种特殊的方法工作，也无济于事，但这可能是由于我在这个过程中缺乏知识。

//编辑2

我已经编辑了我的JavaScript与我一直试图在此期间工作。