Javascript - Playing sound on variable change -

i'll try explain as possible, i'm trying create instant messaging service website used privately group of people. i've got sending , receiving down pat, can't seem find work around notification sounds.

what notification sound play when new message received. i've been fiddling 45 minutes, , i've tried looking around solution, can't seem find avail.

here 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 = "";             (var = 0; < 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;             }         }     } } 

i apologize if it's little messy, have work with. appreciate assistance can offer in advance :)

//edit 1

personally, thinking may work, count of messages when page had loaded, , every time script refreshed , new number detected, make sound.. i've tried getting particular method work, no avail due lack of knowledge in process.

//edit 2

i've edited javascript i've been trying work in meantime.

i have taken code, moved few variable declarations , switched using array.prototype.foreach() don't have handle incrementing index manually... works me...

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;	//just declare array here don't need 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 don't re-declare each time              oldvar = number;          }        }      xmlhttp.open("get","get-messages.php?username=" + username,true);      xmlhttp.send();  }