在 Wiki 上做了很多研究后,研究了代码sc-player.js
以及一些测试,我想我已经找到了解决您问题的方法。请尝试以下操作:
首先,将此代码添加到sc-player.js
文件,就在评论之前// the default Auto-Initialization
(这一行相当于文件末尾之前的8行)
$.scPlayer.loadTrackInfoAndPlay=function($elem,track){
var playerObj=players[$elem.data('sc-player').id];
playerObj.tracks.push(track);
var index =playerObj.tracks.length-1;
var $list=$(playerObj.node).find('.sc-trackslist');
var $artworks=$(playerObj.node).find(".sc-artwork-list");
// add to playlist
var $li=$('<li><a href="' + track.permalink_url +'">' + track.title + '</a><span class="sc-track-duration">' + timecode(track.duration) + '</span></li>')
.data('sc-track', {id:index})
.appendTo($list);
// add to artwork list
$('<li></li>')
.append(artworkImage(track, true))
.appendTo($artworks)
.data('sc-track', track);
$li.click();
}
上面的函数负责将新曲目添加到播放列表并开始播放该曲目。
现在,假设您有播放器的 html 代码
<h2>Top Player</h2>
<div id="topPlayer">
<div class="sc-player">
<a href="http://soundcloud.com/matas/matas-petrikas-live-at-gravity-club-30-05-2008">My live track</a>
<a href="http://soundcloud.com/matas/on-the-bridge">On the bridge</a>
</div>
</div>
<h2>Small Player</h2>
<div id="smallPlayer">
<a href="http://soundcloud.com/forss/sets/soulhack" class="sc-player">Soulhack</a>
</div>
确保包裹好你的sc-player
s in a div
,最好有一个id
,因此您可以稍后在 Javascript 中引用玩家:
最后,您可以使用此 Javascript 代码来检测何时单击曲目smallPlayer
并添加并播放该曲目topPlayer
$(function(){
var $topPlayer=$("#topPlayer .sc-player");//Top player
var $smallPlayer=$("#smallPlayer .sc-player");//Small Player
$smallPlayer.on("onPlayerInit.scPlayer",function(evt){//When player is ready
$smallPlayer.on("onPlayerTrackSwitch.scPlayer",function(evt,track){//Listen to track switch in smallPlayer
setTimeout(function(){//Wait a bit, to avoid playing problems between both players
$.scPlayer.loadTrackInfoAndPlay($topPlayer, track);
},250);
});
});
});
就是这样!
EDIT
如果您只有要添加的歌曲的 url,则可以执行以下操作:
首先,将这个其他函数添加到sc-player.js
文件,就在上一个之后loadTrackInfoAndPlay
功能:
$.scPlayer.loadTrackUrlAndPlay=function($elem,url){
var apiUrl = scApiUrl(url, apiKey);
$.getJSON(apiUrl, function(data) {
if(data.duration){
data.permalink_url = url;
$.scPlayer.loadTrackInfoAndPlay($elem,data);//Call the previous function
}
});
}
现在,假设您有歌曲 URL 的代码:
<p>
The links <br />
<a class="songUrl" href="https://soundcloud.com/feintdnb/coldplay-fix-you-feint-bootleg">Coldplay-Fix you</a><br />
<a class="songUrl" href="https://soundcloud.com/nct-1/nct-you-preview-out-soon-for">NCT - You</a><br />
<a class="songUrl" href="https://soundcloud.com/tufftouch/devil-eyes-konflix-feat-leanne">Konflix - Devil Eyes</a>
</p>
然后,您可以使用此代码将歌曲添加到播放列表并开始播放(或者如果歌曲已存在,则直接播放)
$(".songUrl").click(function(event){
event.preventDefault();
var url=$(this).attr("href");//Url of the song
//If the song is in the tracks list, this line finds it
var $theSong=$topPlayer.find(".sc-trackslist a[href='"+url+"']");
if($theSong.length==0){//
$.scPlayer.loadTrackUrlAndPlay($topPlayer,url );
}else{
$theSong.parent().click();//Fire click = play the song
}
});
这就是所需要的全部。