Soundcloud html5小部件iframe可通過css進行設置嗎？

Question

我想使用html5小部件+它是api（http://developers.soundcloud.com/docs/html5-widget） 我的問題：可以通過CSS對小部件進行樣式化嗎？當玩家加載後，FireBug會顯示樣式信息，我想知道是否可以更改這些樣式？

Answer 1

不，這是不可能的。該小部件插入到iframe中的頁面中，我不認爲可以從外部更改iframe中的樣式。唯一的「造型」是通過「顏色」url參數改變按鈕和波形的顏色。

例如，這裏有一個用戶的聲音與漂亮的粉紅色按鈕和波形亮點窗口小部件：

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

下面是重新格式化爲可讀性的網址：

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

那傢伙用的SoundCloud API它做，一些JavaScript和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; 
    }); 
    } 

});