soundcloud html5 小部件 iframe 是否可以通过 css 设置样式？答案

【问题标题】：Is the soundcloud html5 widget iframe styleable via css?soundcloud html5 小部件 iframe 是否可以通过 css 设置样式？
【发布时间】：2012-04-05 06:11:26
【问题描述】：

我想使用 html5 小部件 + 它的 api (http://developers.soundcloud.com/docs/html5-widget) 我的问题：可以通过 CSS 设置小部件的样式吗？ FireBug 会在播放器加载后显示样式信息，我想知道是否可以更改这些样式？

【问题讨论】：

标签： css iframe soundcloud

【解决方案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

【讨论】：

如何使用 URL 参数设置样式？您介意在答案中添加一个示例吗？
可以使用 javascript 设置样式

【解决方案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;
    });
  }   

});

【讨论】：