Javascript - Playing sound on variable change

Question

I'll try to explain this as much as possible, but basically what I'm trying to do is create an Instant Messaging Service for my website to be used by privately by a group of people. I've got the sending and receiving down pat, but I can't seem to find a work around for the notification sounds.

What I would like is for a notification sound to play when a new message is received. I've been fiddling with it for about 45 minutes, and I've tried looking around for a solution, but I can't seem to find any avail.

Here is my 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;
            }
        }
    }
}

I apologize if it's a little messy, but this is what I have to work with. I appreciate any assistance that anyone can offer in advance :)

//EDIT 1

Personally, what I was thinking may work, was to count all of the messages when the page had loaded, and every time the script refreshed and a new number was detected, make a sound.. I've tried getting this particular method to work, also with no avail but that is likely due to my lack of knowledge in the process.

//EDIT 2

I've edited my JavaScript with what I've been trying to work with in the meantime.

try setting `var number = 0;`, if you are going to be treating it as an integer ... — Sᴀᴍ Onᴇᴌᴀ, Sep 22 '16 at 15:46
@Aelliott1485 That didn't seem to work either, I just get swamped with notification sounds every time the script refreshes. — Bradley, Sep 22 '16 at 15:49
also try moving `var oldVar;` to the top, but then after setting `msgarea.innerHTML =output;` remove the `var` keyword (so we still set oldVar to number) — Sᴀᴍ Onᴇᴌᴀ, Sep 22 '16 at 15:52
Also, there are several ways to [detect variables variables in JavaScript](http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery). — Anderson Green, Sep 22 '16 at 15:55
and where is `msgarea` defined? is that in another section? If not, that would be an issue... or is it the same as `var objDiv = document.getElementById("msg-area")` ? — Sᴀᴍ Onᴇᴌᴀ, Sep 22 '16 at 16:06
`var msgarea = document.getElementById("msg-area");` it's at the top of the script block — Bradley, Sep 22 '16 at 16:07

Sᴀᴍ Onᴇᴌᴀ · Answer 1 · 2016-09-22T16:56:23.610

I have taken your code, moved a few variable declarations up and switched to using Array.prototype.forEach() so we don't have to handle incrementing the index manually... This works for 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 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();
}

`Didn't work` does that mean that the messages didn't display, or something else? have you tried debugging (e.g. with `debugger;` and/or other console logs to see how far it gets before stopping? — Sᴀᴍ Onᴇᴌᴀ, Sep 22 '16 at 16:51
That's what I'm doing right now.. The messages come through perfectly fine.. It just spams the notification sound constantly as soon as the script runs — Bradley, Sep 22 '16 at 16:51
do you only want it to play once after loading messages, instead of once per each message? if so, then move the audio.play outside the forEach... — Sᴀᴍ Onᴇᴌᴀ, Sep 22 '16 at 16:54
I would like it to play every time a new message is received — Bradley, Sep 22 '16 at 16:55
I've updated my Javascript with what I've been trying to get work for the last 40 mins — Bradley, Sep 22 '16 at 17:10

Javascript - Playing sound on variable change

1 Answers1