1

私は本当に最小限のプレーヤーを作ろうとしています-ただ再生ボタンと、フルサイズのプレーヤーにズームアップするための別のボタンです。（フィドル。）

私の知る限り、ボタンの後ろにある白い背景を取り除く方法はありません。（実際の場合、背景はテクスチャ画像であるため、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;
}
4

2 に答える 2

1

その男は、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;
    });
  }   

});
于 2015-07-23T16:39:51.270 に答える
0

いいえ、残念ながら現在、カスタムで透明な背景を使用することはできません。

于 2013-01-14T15:41:28.623 に答える