I'm working on php project,

I have 2 pages, data is synchronized between pages using XMLHttpRequest .

When i click button on the first page, the dom in the second page is updated .

I have this function :

function getAlertes(popup) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() { //Action en réponse de la requête
        if (this.readyState == 4 && this.status == 200) {
            if (popup) {
                document.getElementById("popup-container").innerHTML = this.responseText;
            } else {
                document.getElementById("listAlertes").innerHTML = this.responseText;
            }
            toggleListInvisible();
        }
    };
    // Préparation et envoi de la requête au serveur
    xmlhttp.open("GET", "../../private/controller/action_list_alertes.php?popup=" + popup, true);
    xmlhttp.send();
}

This js script allow to add a div eatch time a button is clicked :

How can i fetch the data eatch time an XMLHttpRequest is detected in the destination page ?

I tried this :

function getAlertes(popup) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() { //Action en réponse de la requête
        if (this.readyState == 4 && this.status == 200) {
            if (popup) {
                document.getElementById("popup-container").innerHTML = this.responseText;
                const audio = new Audio("../audio/BELLDoor_Doorbell.wav");
                audio.play();
            } else {
                document.getElementById("listAlertes").innerHTML = this.responseText;
            }
            toggleListInvisible();
        }
    };
    // Préparation et envoi de la requête au serveur
    xmlhttp.open("GET", "../../private/controller/action_list_alertes.php?popup=" + popup, true);
    xmlhttp.send();
}

i need to play sound when the dom is updated by in this cas the sound is played for every XMLHttpRequest.