Play a sound in JS when some text appear on the screen

Question

I want to monitor a website word changes. I am looking for a sound to autoplay when a given word appears on the screen.

This word might come embedded within a new div ID, so I am not monitoring a particular DOM object change, but a string/new-word that appears on the screen eventually.

In short, I am looking for a JS that plays a sound everytime the word "Customer" appears on the screen. I have tried this code (copy paste from someone else) so far and it plays a sound everytime the page reloads, but not when the word "Customer" appears on the screen.

Here´s the code:

var player = document.createElement('audio');
player.src = 'https://dl.dropbox.com/u/7079101/coin.mp3';
player.preload = 'auto';

for (var i = 0; i <= 10; i++) {
  if (i === 10) {
    // Play a sound when i === 10
    player.play();
  } else {
    console.log('Not yet!');
  }
}

Of course this is just a piece of code that checks for something very different, but when fiddling around with it, I find that everytime I modify the formula it stops playing the sound on tab reload.

Answer 1

Let me start off by saying more info is required (see my comments above), and you should try and make an effort to first get some stub of code together that actually does/attempts to do what you're trying to achieve. StackOverflow is not some kind of code-requesting forum where you can ask others to write something for you.

Since you're new here, I'll try to get you started with some ideas:

It's still unclear to me whether you're trying to scan through a page 'of your own' (i.e. on your own server), or someone else's page (on another server).

Scanning the same page (on your server) that your javascript code is on

If you're scanning one of your own pages, and you can even run the javascript on that very page, your solution will be very simple (source: Javascript: how to check if a text exists in a web page ). I personally prefer the jQuery solution posted in this question:

var player = document.createElement('audio');
player.src = 'https://dl.dropbox.com/u/7079101/coin.mp3';
player.preload = 'auto';

window.setInterval(function(){
  if($("*:contains('Customer')").length > 0){
    console.log('Customer detected, playing sound...');
    player.play();
  }
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Customer! 

There is of course still he problem that you'll probably only want to play the sound once for every new occurance of the word 'customer'. This will require more advanced programming (you'll have to keep track of which words you've already played the sound for), which is kind of out of scope for this question.

Scanning a different page (on your server, or an external one*)

If you're loading a different HTML page (or other text-type page, doesn't really matter) you can also find your solution on StackOverflow (source: How to check if string exists on external page with JavsScript? ). In short, you'll perform an AJAX request to get the page, and then check for the word 'Customer'. *The same-origin policy will however prevent you from loading most external pages purely through javascript (read more: Loading cross domain endpoint with jQuery AJAX ), so you will need some kind of cross-origin plugin (read more in this topic).

var player = document.createElement('audio');
player.src = 'https://dl.dropbox.com/u/7079101/coin.mp3';
player.preload = 'auto';

var url= 'http://www.businessdictionary.com/definition/customer.html';

window.setInterval(function(){
  $.get(url, function(data) {
    if(data.indexOf('whatever') != -1) {
      console.log('Customer detected, playing sound...');
      player.play();
    }
  }, 'text');
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Best of luck with your project, and welcome to StackOverflow. I will update my answer if needed, or when you provide more information.