Press button on Particle Core = MP3 plays on specific webpage

graytek · August 21, 2015, 7:12pm

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.

Moors7 · August 21, 2015, 7:21pm

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.

graytek · August 21, 2015, 7:33pm

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!

Moors7 · August 21, 2015, 7:42pm

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)

github.com

particle-iot/sparkjs/blob/master/examples/node/get-event-stream-forever.js

/*jslint node: true */
"use strict";

var spark = require('../../lib/spark');
//var spark = require('spark');

//example code to re open the SSE stream when it ends
 var openStream = function() {

    //Get your event stream
    var req = spark.getEventStream(false, 'mine', function(data) {
      console.log("Event: " + JSON.stringify(data));
    });

    req.on('end', function() {
        console.log("ended!  re-opening in 3 seconds...");
        setTimeout(openStream, 3 * 1000);
    });
};

This file has been truncated. show original

This is for playing your audio, in combination with your own link:

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.

graytek · August 21, 2015, 8:29pm

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.

bko · August 21, 2015, 8:42pm

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!

graytek · August 21, 2015, 8:50pm

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!

bko · August 21, 2015, 9:29pm

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.

graytek · August 21, 2015, 10:20pm

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?

graytek · August 21, 2015, 11:42pm

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>

Moors7 · August 22, 2015, 1:50pm

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 :)!

Topic		Replies	Views
How do I get my core to play an MP3? General	4	1911	May 4, 2015
Print result from Particle.function on webpage? Getting Started	9	2402	March 2, 2016
Particle Web based Music player (computer/ ras pi required) WIP Cloud	1	852	June 27, 2015
Simple Web Button to turn Particle led on Tutorials	4	1330	October 24, 2020
Click and hold html button to send command to particle General	2	569	November 18, 2018

Press button on Particle Core = MP3 plays on specific webpage

Related Topics