Javascript - Abspielen von Sound bei variabler Änderung

Question

Ich werde versuchen, dies so viel wie möglich zu erklären, aber im Grunde versuche ich einen Instant Messaging Service für meine Website zu erstellen, der privat von einer Gruppe von Leuten genutzt werden kann . Ich habe das sendende und empfangende Klaps, aber ich kann anscheinend keine Arbeit für die Benachrichtigungstöne finden.

Was ich möchte ist, dass ein Benachrichtigungston abgespielt wird, wenn eine neue Nachricht empfangen wird. Ich habe ungefähr 45 Minuten damit herumgespielt, und ich habe versucht, mich nach einer Lösung umzusehen, aber ich kann nichts finden.

Hier ist mein 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; 
      } 
     } 
    } 
} 

ich entschuldige mich, wenn es ein wenig chaotisch, aber das ist, was ich habe, mit zu arbeiten. Ich schätze jede Hilfe, dass jemand im Voraus anbieten können :)

// EDIT 1

persönlich, was ich kann arbeiten dachte, war alle Nachrichten zu zählen, wenn die Seite geladen hatte, und jeder Zeit das Skript aktualisiert und eine neue Nummer erkannt wurde, einen Ton zu machen .. Ich habe versucht, diese bestimmte Methode zu arbeiten, auch ohne Erfolg, aber das liegt wahrscheinlich an meinem Mangel an Wissen in dem Prozess.

// EDIT 2

ich mit meinem JavaScript bearbeitet habe, was ich habe versucht, mit in der Zwischenzeit zu arbeiten.

Answer 1

Ich habe den Code genommen, bis ein paar Variablendeklarationen bewegt und geschaltet mit Array.prototype.forEach() so nicht behandeln müssen wir den Index manuell erhöht wird ... Dies funktioniert für mich ...

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