Ist das Soundcloud html5 Widget iframe styleable über CSS?

Question

Ich möchte das html5 Widget verwenden + es ist api (http://developers.soundcloud.com/docs/html5-widget) Meine Frage: Kann das Widget über CSS gestylt werden? FireBug zeigt Style-Informationen, sobald der Player geladen ist, und ich frage mich, ob es möglich ist, diese Stile zu ändern?

Answer 1

Nein, das ist nicht möglich. Das Widget wird in die Seite in einem iframe eingefügt und ich glaube nicht, dass es möglich ist, die Stile in einem iframe von außen zu ändern. Das einzige "Styling", das berücksichtigt wird, ist das Ändern der Farbe der Tasten und der Wellenform über den URL-Parameter "color".

Zum Beispiel, hier ist ein Benutzer Sounds Widget mit hübschen rosa Tasten und Wellenform-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

Hier ist die URL für die Lesbarkeit neu formatiert ist:

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 

Answer 2

Dieser Kerl tat es mit Soundcloud-API , einige JavaScript und 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; 
    }); 
    } 

});