Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 308
Eric Tripp Avatar asked Sep 04 '12 22:09

Eric Tripp


People also ask

How do I customize my SoundCloud player?

To get customized SoundCloud player, you don't need any embedded script from SoundCloud site. All you have to do is just define an element with unique id then add the required script. For example, I want to add one of my favorite users from SoundCloud, Regina Spektor, to my site.

Is there a widget for SoundCloud?

But sometimes you want to take people straight to your own website and do your own private promo there. Well you can do this with SoundCloud too by using our secret widget feature. This allows you to keep your tracks totally private on SoundCloud but still grab a player widget that you can embed on your own promo page.

How do you use SoundCloud in HTML?

Click on the embed tab to view what options you have to embed your player. Copy-paste the embed code from 'Code & preview'. Next, copy the code and paste it into the HTML editor section of your site's editor.

What is SoundCloud widget?

The SoundCloud widget embeds audio clips from SoundCloud.


1 Answers

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);
like image 159
Jorrit Smit Avatar answered Sep 30 '22 10:09

Jorrit Smit