Press button on Particle Core = MP3 plays on specific webpage

Hello,
What would be the best way to have a MP3 Sound Effect start to play on a web page when a button is pressed.

For example, we would have a web page open, and when a button on the particle core is pressed, it makes that web page play an MP3 (using this as the MP3 player on the web page - http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all)

Thank you very much.

1 Like

I prefer using Spark.publish(), since it’s pushed. You just set up a listener on a webpage, and act on it when a publish comes in. In combination with the JavaScript library, this shouldn’t be too hard.

Give it a shot, and let us know if you need any assistance.

2 Likes

Thanks Moors7,
I’m looking at this example from Zach regarding publishing (http://blog.particle.io/2014/03/11/spark-publish/) and think maybe I’ll modify it to publish on a button instead of the PIR.

Do you know of any similar examples I can work from (for both the publish code and listen on HTML) and I’mm mash them together?
Thank you!

This is a good one:

Here’s an example for the subscribing: (You’ll have to adjust that for HTML/javascript. The example as-is is for node.js)

This is for playing your audio, in combination with your own link:
http://www.w3schools.com/tags/av_met_play.asp

Swapping out the PIR sensor for a button should be trivial. Just make sure you debounce the button to make sure if doesn’t trigger repeatedly, or you might cross the publish threshold.

2 Likes

Thank you.
I’ve taken the advice and written the following for the core (using info from this blog).
The switch is on D3 and is debounced - publishing to “sound1”

int last;
bool ready;

void setup() {
  pinMode(D3, INPUT);
  last = millis();
  ready = true;
}

void loop() {
  if (millis() - last > 200) {
    if (digitalRead(D3)) {
      // button pressed
      if (ready) {
        ready = false;
        Spark.publish("sound1");
        last = millis();
      }
    } else {
      // button released
      ready = true;
    }
  }
}

Where I get lost in on the HTML/Javascript side, especially how to cause the mp3 to play.
For instance am I on the right track on modifying this post. I’m so sorry I wasn’t sure how to integrate your above “spark/sparkjs/blob/master/examples/node/get-event-stream-forever.js” link to my HTML code.

Hi @graytek

Try the technique at the bottom of this page using the HTML5 audio player:

Instead of an onclick action, you would call the player (playSound() in the example) in the event subscription handler when you get an event. You could have different event data play different sounds quite easily too.

Looks like fun!

Oh Hey @bko !! I’ve read heaps of your posts, really nice to meet you.
I’ve taken that code, modified it and it’s now live here (back to the future pic + random horse noise).

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
              } else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
      </script>
  </head>
<body>
    <span id="dummy" onclick="playSound(this, 'http://www.w3schools.com/html/horse.mp3');">
      <img src="https://upload.wikimedia.org/wikipedia/en/d/d2/Back_to_the_Future.jpg" name="Bottom-1" width="240" height="374" border="0" id="Bottom-1"/>
    </span>
</body>
</html>

Could you help me with the “you would call the player (playSound() in the example) in the event subscription handler when you get an event” part, I just don’t know how to accomplish this. Thanks!

In the tutorial for Spark publish use this code instead:

        eventSource.addEventListener('sound1', function(e) {
            playSound(this, 'http://www.w3schools.com/html/horse.mp3');
        }, false);

I am not sure if you need this or document or something else in the first argument to the playSound() call so you might need to play around with that.

Thanks @bko and @Moors7
I’ve created this Particle code:


int last;
bool ready;

void setup() {
  pinMode(D3, INPUT);
  last = millis();
  ready = true;
}

void loop() {
  if (millis() - last > 200) {
    if (digitalRead(D3)) {
      // button pressed
      if (ready) {
        ready = false;
        Spark.publish("sound1");
        last = millis();
      }
    } else {
      // button released
      ready = true;
    }
  }
}

And am using this in the HTML


<!DOCTYPE HTML>
<html>

  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
              } else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
      </script>
  </head>

<body>
    <script type="text/javascript">

        var deviceID = "DEVICE-ID";
        var accessToken = "TOKEN-ID";
        var eventSource = new EventSource("https://api.spark.io/v1/devices/" + deviceID + "/events/?access_token=" + accessToken);

        eventSource.addEventListener('sound1', function(e) {
            playSound(this, 'http://www.w3schools.com/html/horse.mp3');
        }, false);

        }
    </script>

        <span id="dummy" onclick="playSound(this, 'http://www.w3schools.com/html/horse.mp3');">
      <img src="https://upload.wikimedia.org/wikipedia/en/d/d2/Back_to_the_Future.jpg" name="Bottom-1" width="240" height="374" border="0" id="Bottom-1"/>
    </span>

</body>
</html>

I still can’t get it to play the mp3. Maybe a quick check is to get the page to show ‘on’ or ‘off’ depending on the switch state, how do I do that?

I’m getting very close now.
@bko @Moors7 thank you so much for your help so far. Just curious if you know how to activate the MP3 to play (or another series of actions that will activate a sound).
I believe the core is getting publishing correctly (I hope so, any easy way to check?)

Here’s the core code:

int last;
bool ready;
int led1 = D0;

void setup() {
  pinMode(led1, OUTPUT);
  digitalWrite(led1, LOW);
  
  pinMode(D3, INPUT);
  last = millis();
  ready = true;
  
}

void loop() {
  if (millis() - last > 200) {
    if (digitalRead(D3)) {
      // button pressed
      if (ready) {
        ready = false;
        Spark.publish("sound1");
        digitalWrite(led1,HIGH);
        last = millis();
      }
    } else {
      // button released
      ready = true;
      digitalWrite(led1,LOW);
    }
  }
}

Here’s the HTML:


<!DOCTYPE HTML>
<html>

  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
              } else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
      </script>
  </head>

<body>
    <script type="text/javascript">
    function start() {

        document.getElementById("sound1").innerHTML = "Waiting for data...";
        var deviceID = "48ff68065067555026472287";
        var accessToken = "91f68364396f0217f77ef56e7fdbd62cc75d6284";
        var eventSource = new EventSource("https://api.spark.io/v1/devices/" + deviceID + "/events/?access_token=" + accessToken);


        eventSource.addEventListener('sound1', function(e) {
            playSound(this, 'http://www.w3schools.com/html/horse.mp3');
            }, false);

    }
    </script>


        <span id="dummy" onclick="playSound(this, 'http://movie-sounds.org/quotes/back-future/1-21-gigawatts.mp3');">
      <img src="https://upload.wikimedia.org/wikipedia/en/d/d2/Back_to_the_Future.jpg" name="Bottom-1" width="240" height="374" border="0" id="Bottom-1"/>


    </span>
</body>
</html>

Glad to see you’ve gotten this far already. For the playing part, there are some things you can try. You can try the (supposedly) native tags, and control those. You can also use javascript directly.
This is for the tags: http://www.w3schools.com/tags/tag_audio.asp
And this is how you can control them: http://www.w3schools.com/tags/av_met_play.asp (switch video things for corresponding audio)

This a a javascript implementation: https://dev.opera.com/articles/html5-audio-radio-player/

Mind you that you’ll probably need to support a couple of audio formats, since not all browsers support the same things.
Give it a try, and let us know how/if that worked for you :)!