JQuery how to know when a new message is received?

Question

Im using the follow javascript in messages page, is it possible to play a sound when a new message is received? Be aware that i don't want to play a sound for each request but only when a new message is added in the page.

function homeAjax() {
  $.ajax({
    url : 'subHome',
    success : function(data) {
      $('#result').html(data);
    }
  });      
}

var intervalId = 0;
intervalId = setInterval(homeAjax, 3000);

My MVC controller (subHome) returns all messages using ModelAndView.

Answer 1

maybe it will help.

<script type="text/javascript">
  var datLength = 0;
  function homeAjax() {
    $.ajax({
        url : '/data',
        contentType : "application/json",
        dataType : 'json',
        success : function(data) {

           if(data.length > datLength){
               console.log(data.length);
               datLength = data.length;
               /*jquery audio play*/
           }else{
               console.log("no play");
           }
        }
    });

    } 
 </script>

Show Console

Answer 2

Use an <audio> tag:

<audio id="myAudio" src="path/to/sound.mp3">

Then whenever you need to play the clip, use:

<script>
document.getElementById("myAudio").play();
</script>