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

我試圖製作一個非常小的播放器 - 只是一個播放按鈕，另一個按鈕可以放大到一個全尺寸的播放器。（Fiddle。）是否有可能沒有背景的（iframed）SoundCloud小部件？

據我所知，沒有辦法擺脫按鈕後面的白色背景。（在真實情況下，背景是帶紋理的圖像，因此只是將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; 
}

來源

2013-01-13 sprugman

不，不幸的是它目前無法對定製和透明背景

來源

2013-01-14 15:41:28

噓聲。功能要求！ :) – sprugman

我可能會建議將播放按鈕作爲一個單獨的元素，通過[Widget API]（http://developers.soundcloud.com/docs/api/html5-widget）來控制小部件。功能請求放在列表中，謝謝。 –

一般而言，我寧願不必在主頁上包含任何腳本 - 這就是使用iframe小部件的全部要點，但是要感謝指針。（那個看起來相當短，我相信你們是值得信賴的，但仍然...） – sprugman

那傢伙發現了一個「哈克」的解決方案使用的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-23 16:39:51

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

回答

相關問題