SoundCloud Energy App 2.0

I’ve made some updates to the SoundCloud Energy Web App (that’s the actual app to the right; if you’re using Safari or Google Chrome you can press the “play” button to stream music right here).

From the original somewhat primitive version I’ve made the following updates:

  • In the original app I wrongly assumed you could treat multiple source elements for an HTML5 audio element as a “playlist.” This isn’t the intended use of multiple sources – it is intended to allow for multiple formats for a single track. To allow for a “playlist”-like functionality of multiple tracks I’ve loaded the SoundCloud tracks into a JavaScript array and written some simply JavaScript code to loop through them.
  • I got rid of the default HTML5 audio controls and replaced them with JavaScript-bound “play” and “pause” graphical buttons.
  • I removed the wordy explanation of what this actually is and replaced it with a Pachube-generated graph of the last 24 hours of energy interchange.

The updated code is in the github repository for your enjoyment.

Comments

Martin Cathrae's picture
Martin Cathrae on April 3, 2011 - 17:07

Thanks for all the work you’re doing on this, it’s both fun and informative. I’m most of the way through a long winded blog post about PEI wind energy and what you’ve been up to with this stuff.

Martin Cathrae's picture
Martin Cathrae on April 3, 2011 - 17:13

I have a question though, what happens with the soundcloud app when our energy import gets really low, or even negative like briefly last night? I don’t know of much music out there recorded at 5bpm… :)

Peter Rukavina's picture
Peter Rukavina on April 3, 2011 - 17:32

When the energy is “negative” – we’re sending energy to New Brunswick – I simply take the absolute value of the figure in MW. So -5 MW plays the same as 5 MW. I suppose if I could figure out a way of having the audio played backwards that would be more appropriate.


SoundCloud returns plenty of tracks at 5 BPM - here’s an XML dump of some of them from their API. Of course any API&#160is only as good as the metadata backing it up, so it’s possible that at least some of those tracks are mislabelled.


There are even words in Italian to describe these very, very slow pieces, like Larghissimo.

Martin Cathrae's picture
Martin Cathrae on April 3, 2011 - 17:57

That is pretty cool, I’m going to have to try to listen when our imports get very low!

My post is up.

Peter Rukavina's picture
Peter Rukavina on April 3, 2011 - 18:10

I”ve updated the app with “next track” and “previous track” buttons, and change the “play” button to a “loading” icon (I suppose it really should be an animated spinner) when the stream is loading. HTML5’s audio element makes all of this very, very easy.

Peter Rukavina's picture
Peter Rukavina on April 3, 2011 - 18:27

And finally, for today, I’ve added the display of the currently-playing track, linked to its permalink page on SoundCloud.com.

Oliver's picture
Oliver on April 4, 2011 - 12:00

Could you add a second track of the current wind speed?

Peter Rukavina's picture
Peter Rukavina on April 4, 2011 - 13:02

And align the beats!

Peter Rukavina's picture
Peter Rukavina on April 4, 2011 - 13:35

If you open http://l.ruk.ca/pei-energy in Safari on a Mac, and then select File |&#160Open in Dashboard from the menu, you can add the widget to your OS X Dashboard.

Peter Rukavina's picture
Peter Rukavina on April 4, 2011 - 13:37

And once you do this, if you click on the (i) in the corner of the widget and uncheck the “Only play audio in dashboard” then you can stream the audio directly from the dashboard while you work away on something else (if you don’t do this then the audio will only play as long as you have the dashboard open).

Add new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Plain text

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Typographic refinements will be added.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.