JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>MutationObserver example</title>
  </head>
  <body>
    <button id="btn">Create DIV</button>
      <div id="divi">
        1
      </div>
      
      <div class="game-object">
    <script type="text/javascript">
        var clicks = 0;
        function updateClickCount() {
            document.getElementById("countedMessages").innerHTML = clicks;
        }
    </script>
    <button type="button" onClick="clicks++;updateClickCount();" id="push">NO.</button>
    <div id="countedMessages"></div>
</div>
    <script src="app.js"></script>
  </body>
</html>

JavaScript

function playSound(url) {
    const audio = new Audio(url);
    audio.play();
    }

//let elem = document.getElementById('btn');
//let div = document.createElement('div');//badge id
//div.innerHTML = 'This is a DIV cuco';
//let div = document.getElementById('countedMessages');//badge id

//elem.addEventListener('click', e => {
//  document.body.appendChild(div);
//});

const observer = new MutationObserver(mutation => {
  console.log('Nuevo mensaje entrante!');
  playSound('https://firebasestorage.googleapis.com/v0/b/goldennotes-app.appspot.com/o/message.mp3?alt=media&token=a59259cb-ffea-4228-91ed-ea0d8486de11');
});

observer.observe(countedMessages, {
  childList: true,
  attributes: true,
  subtree: true,
  characterData: true
});