Question

我正在尝试制作一个非常小的播放器 - 只需一个播放按钮，另一个按钮可以放大到一个全尺寸的播放器。（Fiddle。）

据我所知，没有办法摆脱按钮后面的白色背景。（在实际情况中，背景是纹理图像，因此只需将iframe的bg颜色更改为其他纯色就不如能够拥有透明（和无边框）小部件。

小提琴代码：

HTML

<div id="player-controls"><a href="#zoom" onclick="$('#player-container').toggleClass('enlarged'); return false"><span>zoom player</span></a></div>
<div id="player-container">
  <iframe width="450" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3036975"></iframe>
</div>

CSS

body {
  position: relative;
  background: black;
  margin: 10px
}

#player-container {
  position: absolute;
  top: 1.5em;
  height: 36px;
  width: 36px;
  overflow: hidden;
  transition: width, height;
  transition-duration: .5s;
  -webkit-transition: width, height;
  -webkit-transition-duration: .5s;
  -moz-transition: width, height;
  -moz-transition-duration: .5s;
  -o-transition: width, height;
  -o-transition-duration: .5s;
}
#player-container.enlarged {
  width: 450px;
  height: 450px;
}
#player-container iframe {
  position:absolute;
  top: -11px;
  left: -177px;
  transition: top, left;
  transition-duration: .5s;
  -webkit-transition: top, left;
  -webkit-transition-duration: .5s;
  -moz-transition: top, left;
  -moz-transition-duration: .5s;
  -o-transition: top, left;
  -o-transition-duration: .5s;
}
#player-controls {
  position: absolute;
  top: 0;
}
#player-controls a {
  color: white;
}
#player-container.enlarged iframe {
  top: 0;
  left: 0;
}

Answer 1

那家伙使用SoundCloud API，一些JavaScript和CSS找到了一个“hacky”解决方案 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;
    });
  }   

});

Answer 2

不，不幸的是，目前无法拥有自定义和透明背景。

是否有可能没有背景的（iframed）SoundCloud小部件？

2 个答案: