Question

我正在使用soundcloud custom player创建一个可播放所有歌曲的播放器我的网站。当我只放置任何音轨或帖子的静态网址时，这非常有用。但我想要的是动态地将歌曲添加到列表中。

我做了很多研究，但无法让它发挥作用。我想要的是整个网站会有多个玩家。有点（http://soundcloud.com）并且顶部会有一个主要播放器（如soundcloud），它会在现场播放约100首最新歌曲，并且会有一个较小的播放器点击，只会将该歌曲附加到列表中开始播放那首歌。

我不确定这是否是正确的过程。如果任何人可以给我任何暗示我如何进一步继续那么它会很棒。

Answer 1

在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包裹在div中，最好包含id，以便稍后在Javascript中引用播放器：

最后，您可以使用此Javscript代码检测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);
        });
    });
});

就是这样！。

修改

如果您只有要添加的歌曲的网址，则可以执行以下操作：

首先，将此其他函数添加到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 } }); }

现在，假设你有这些歌曲网址的代码：

 The links <a class="songUrl" href="https://soundcloud.com/feintdnb/coldplay-fix-you-feint-bootleg">Coldplay-Fix you</a> <a class="songUrl" href="https://soundcloud.com/nct-1/nct-you-preview-out-soon-for">NCT - You</a> <a class="songUrl" href="https://soundcloud.com/tufftouch/devil-eyes-konflix-feat-leanne">Konflix - Devil Eyes</a> 

然后，您可以使用此代码将歌曲添加到播放列表并开始播放（或者只是在已经存在的情况下播放）

$(".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 } });

而这就是所需要的。

Answer 2

我会尽量给你尽可能多的信息，但由于无处可寻，我不确定它是否会有所帮助。从wiki开始很重要。这是我可以从那里提取的：

动态曲目加载

可以动态创建播放器，因此可以添加任何网址。为此，可以使用以下方法：

直接追加元素：

    $('div.your-container-class').scPlayer({
        links: [{url: "http://soundcloud.com/matas/hobnotropic", title: "http://soundcloud.com/matas/hobnotropic"}]
    });

或创建对象并追加到您想要的位置：

    var $myPlayer  = $.scPlayer({
        links: [{url: "http://soundcloud.com/matas/hobnotropic", title: "http://soundcloud.com/matas/hobnotropic"}]
    });
    $myPlayer.appendTo($('#somewhere-deep-in-the-dom'));

我刚发现的一个小例子：

    $(function() {
        $('a.sc-remote-play1').on('click', function(event) {
            $('.sc-player').scPlayer({
                links: [{url: "http://soundcloud.com/matas/hobnotropie", title:   "Hobnotropic"}],
            });
        });
    });

我认为应该解决动态跟踪加载问题。

初始化scPlayer

重要的是要考虑到scPlayer必须加载本身，因此如果直接使用jQuery更改url将无法工作。为了初始化scPlayer，一旦加载了DOM，就可以使用

$('a.your-link-class').scPlayer();

或

$('div.your-container-class').scPlayer();

正如我所说，使用以下方法对DOM加载进行默认加载

$('a.sc-player, div.sc-player').scPlayer();

此默认行为可以更改如下：

$.scPlayer.defaults.onDomReady = function(){
  // Default behaviour wanted. Per default we have:
  $('a.your-link-class').scPlayer();
};

这就是我现在所做的。尝试让scPlayer工作（动态加载歌曲），我们可以跟随数据加载和所有这些。

Soundcloud自定义播放器动态添加和播放歌曲

2 个答案:

动态曲目加载

初始化scPlayer