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>
<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>
<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>
If you’ve got a suggestion, found a bug, please let us know by leaving a comment below.