CODEWITHSUNDEEP
htmlhtml5-audiosoundcloudvolumeweb-widget
Eric Tripp
Eric Tripp

Reputation: 51

Controlling Soundcloud HTML5 Widget Player Volume

I have been attempting to use the example given on a Soundcloud Blog page so I can set the volume lower.

I only changed the iframe size and src= to my playlist and set volume to 10 so I could notice the difference if it worked. So far I observe no change, volume is still at 100%.

I have tried it with and without placing the following in the head of my template. It doesn't seem to matter.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Here is the code that I adjusted from the Soundcloud example:

    <iframe id="sc-widget" width="350" height="332" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1417174&auto_play=true&show_artwork=false&color=37415f"></iframe>

  <script src="http://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(10);
    });

  }());
  </script>

This code is live on a Joomla site.

Can someone please help me understand what I'm lacking to control the volume?

Is it a jquery conflict? If so, any thoughts on how to resolve it?

Upvotes: 5

Views: 7609

Answers (2)

propagated
propagated

Reputation: 4612

The previous answer is no longer accurate. The setVolume() api has been fixed/changed to take in an int between 0 and 100.

I stumbled upon this question trying to quickly change the volume of an embedded SoundCloud iframe using the chrome console. I created a quick gist for myself. https://gist.github.com/propagated/78aaedfbc0c23add7691bb975b51a3ff

//load soundcloud js api if needed
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://w.soundcloud.com/player/api.js';
document.head.appendChild(script);

//get the id of the player iframe or inject it using chrome
var id = 'scplayer',
    widgetIframe = document.getElementById(id),
    fixWidget = SC.Widget(widgetIframe);
fixWidget.setVolume(50); //% between 1 and 100

Upvotes: 0

Jorrit Smit
Jorrit Smit

Reputation: 81

the volume range is actually from 0 to 1, this is stated wrongly in the documentation. So if you would like to set the volume to 10%, you would need this:

var widgetIframe = document.getElementById('sc-widget'),
widget       = SC.Widget(widgetIframe);

widget.setVolume(0.1);

Upvotes: 5

Related Questions