Soundcloud自定义播放器动态添加和播放歌曲 [英] Soundcloud custom player add and play song dynamically

问题描述

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

I am using soundcloud custom player to create a player which can play all the songs on my site. This works pretty good when i just place static url of any track or a post. But what i want is to add the song to the list dynamically.

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

I have done lots of research but couldn't get it to work. What i want is there would be multiple players through out the site. kind of(http://soundcloud.com) and there would a main player on the top(like soundcloud) which would play around 100 latest songs on site and there would be a smaller player clicking on which will just append that song to the list and start playing that song.

我不确定是否这是正确的过程。如果任何人可以给我任何提示我如何继续进行，那就太棒了。

I am not sure if this is the right process. If any one can just give me any hint how i can proceed further then it would be great.

推荐答案

经过大量工作后在Wiki中研究，研究 sc-player.js 中的代码，以及一些测试，我想我找到了解决问题的方法。请尝试以下操作：

After doing a lot of research in the Wiki, studying the code in sc-player.js, and some testing, I think I've found a solution to your problem. Try the following:

首先，将此代码添加到 sc-player.js 文件中，就在评论之前 //默认的自动初始化（此行就像文件结尾前的8行）

First, add this code to sc-player.js file, just before the comment // the default Auto-Initialization (this line is just like 8 lines before the end of the file)

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

上述功能负责将新曲目添加到播放列表并启动播放曲目。

The function above, takes care of adding a new track to the playlist and starts playing the track.

现在，假设你有这个播放器的HTML代码

Now, suppose you have this html code for the players

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

Make sure to wrap your sc-players in a div, preferably with an id, so you can reference the players later in Javascript:

最后，您可以使用此Javscript代码检测何时在 smallPlayer 中点击一首曲目，并在<$中添加并播放该曲目c $ c> topPlayer

Finally, you can use this Javscript code to detect when a track is clicked in smallPlayer and add and play that track in 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);
        });
    });
});

这就是它！。

编辑

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

If you only have the url of the song to be added, you can do the following:

首先，将此其他函数添加到 sc-player.js 文件中，紧跟在前一个 loadTrackInfoAndPlay function：

First, add this other function to sc-player.js file, just after the previous loadTrackInfoAndPlay function:

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

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

Now, suppose you have this code for the urls of the songs:

<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>

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

Then, you can use this code to add the song to the playlist and start playing it (or just playing it if it already exists)

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

这就是所需要的。

这篇关于Soundcloud自定义播放器动态添加和播放歌曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！