HTML5 Widget API

Today we’re officially announcing our JavaScript API for the new HTML5 SoundCloud Widget. To use it, just insert the script tag on a page…

HTML5 Widget API

March 22nd, 2012 by Alexander Kovalev

Today we’re officially announcing our JavaScript API for the new HTML5 SoundCloud Widget. To use it, just insert the script tag on a page where you’re using our HTML5 Widget.

<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>

What does it permit?

Access and control the properties of HTML5 Widget

<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/1539950/favorites" width="100%" height="465" scrolling="no" frameborder="no"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget       = SC.Widget(widgetIframe);

widget.bind(SC.Widget.Events.READY, function() {
widget.bind(SC.Widget.Events.PLAY, function() {
// get information about currently playing sound
widget.getCurrentSound(function(currentSound) {
console.log('sound ' + currentSound.get('') + 'began to play');
});
});
// get current level of volume
widget.getVolume(function(volume) {
console.log('current volume value is ' + volume);
});
// set new volume level
widget.setVolume(50);
// get the value of the current position
});

}());
</script>

Load widgets

<iframe id="sc-widget" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&show_artwork=true"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget       = SC.Widget(widgetIframe),
newSoundUrl = 'https://api.soundcloud.com/tracks/13692671';

widget.bind(SC.Widget.Events.READY, function() {
// load new widget
widget.bind(SC.Widget.Events.FINISH, function() {
widget.load(newSoundUrl, {
show_artwork: false
});
});
});

}());
</script>

Resources

• take a look at our documentation for more details and technical descriptions

• check out our playground to get an overview of functionalities provided by the API

Feedback

If you’ve got a suggestion, found a bug, please let us know by leaving a comment below.

• ← Hacker Time – the first 3 months
• Developer Contest: SoundCloud + Acapela Group Mashup →

Original source