CODEWITHSUNDEEP
cssiframesoundcloud
meikelrix
meikelrix

Reputation: 53

Is the soundcloud html5 widget iframe styleable via css?

I'd like to use the html5 widget + it's api (http://developers.soundcloud.com/docs/html5-widget) My question: can tha widget be styled via CSS? FireBug shows style information, once the player is loaded, and I'm wondering, if it is possible to change those styles?

Upvotes: 5

Views: 6688

Answers (2)

Gal Margalit
Gal Margalit

Reputation: 5844

That guy did it using SoundCloud API, some JavaScript and CSS:

http://codepen.io/nickcolley/pen/uoCIy

$(document).ready(function(){

  var player = SC.Widget($('iframe.sc-widget')[0]);
  var pOffset = $('.player').offset();
  var pWidth = $('.player').width();
  var scrub;

  player.bind(SC.Widget.Events.READY, function() {
    setInfo();
    player.play();
  }); //Set info on load

  player.bind(SC.Widget.Events.PLAY_PROGRESS, function(e) {
    if( e.relativePosition < 0.003 ) { setInfo(); }
    //Event listener when track is playing
    $('.position').css('width', ( e.relativePosition*100)+"%");
  });

   $('.player').mousemove(function(e){ //Get position of mouse for scrubbing
    scrub = (e.pageX-pOffset.left);
  });

  $(document).on('keydown', function(e){
    switch(e.keyCode){
      case 32:
        player.toggle(); 
      break;
      case 39:
        player.next();
      break;
      case 37:
        player.prev();
      break;
    }
  });

  $('.player').click(function(){ //Use the position to seek when clicked
    $('.position').css('width',scrub+"px");
    var seek = player.duration*(scrub/pWidth); 

    //Seeking to the start would be a previous?
    if ( seek < player.duration * .05 ) {
      player.prev();
    } else if ( seek > player.duration * .99 ) {
      player.next();
    } else {      
      player.seekTo(seek);
    }

  });

   function setInfo() {
    player.getCurrentSound(function(song) {
      console.log(song);

      $('.waveform').css('background-image', "url('" + song.waveform_url + "')");    
      $('.player').css('background-image', "url('" + song.artwork_url.replace('-large', '-t500x500') + "')");

      var info = song.title;
      $('.info').html(info);

      player.current = song;
    });

    player.getDuration(function(value){
      player.duration = value;
    });

    player.isPaused(function(bool){
      player.getPaused = bool;
    });
  }   

});

Upvotes: 1

nickf
nickf

Reputation: 546085

No, this isn't possible. The widget is inserted into the page in an iframe and I don't think it's possible to change the styles inside an iframe from outside. The only "styling" which is catered for is changing the colour of the buttons and waveform, via the "color" url parameter.

For example, here's a user's sounds widget with pretty pink buttons and waveform highlights:

http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F2&show_artwork=true&show_comments=false&color=ff00ff&show_playcount=false&liking=false

Here's the url reformatted for legibility:

http://w.soundcloud.com/player/
?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F2
&show_artwork=true
&show_comments=false
&color=ff00ff    <-----
&show_playcount=false
&liking=false

Upvotes: 5

Related Questions