2

When I update a file on my server the html page automatically changes the html page (checks every 9 seconds for changes).

How can I trigger a chime sound file to alert a user of a html page change?

Here is the html:

<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
      $("#responsecontainer").load("data.txt");
      var refreshId = setInterval(function() {
      $("#responsecontainer").load('data.txt?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script> 
</head>

<body bgcolor=#befcb4>
<div id="responsecontainer"></div>
</body></html>
Daily Stock Plays
  • 21
  • 2
  • Your best bet is probably sending the modified timestamp through ajax like this: http://stackoverflow.com/questions/25062132/get-the-modified-timestamp-of-a-file-with-javascript, or just set a flag in the file you are checking when you update it. – Derek Jan 23 '15 at 21:57

2 Answers2

0

If you're problem is triggering the actual sound, you can find that here. As far as determining whether there is a new element in the page, I'd just compare it to the old one.

Community
  • 1
  • 1
user3554664
  • 349
  • 2
  • 16
  • Would you be able to post an example, code that compares the new element to the old one then plays the sound if changed? – Daily Stock Plays Jan 23 '15 at 21:44
  • Not sure exactly how, but I believe you can get the response code in a function of the `.load()`. You can see how to do that [here](http://api.jquery.com/load/). I'm just not sure whether the function completes after changing the element, or before. It would be something like `.load( "data.txt", function( response, status, xhr ) { compare response to element here... })` – user3554664 Jan 24 '15 at 23:41
0

You can easliy create a HTML Audio Element with javascript:

<audio autoplay><source src="youraudiofile.mp3" type="audio/mp3"></audio>

After you created it in jquery with .append() or whatever just add an .delay(2000) in ms with your length of your file and then remove that element again with .remove()

e.g.

var audioElement = $('<audio autoplay id="music"><source src="youraudiofile.mp3" type="audio/mp3"></audio>');
$("body").append(audioElement).delay(1000).remove("#music");
bgeissler
  • 68
  • 1
  • 6