Soundcloud API 串流不同的歌曲答案

【问题标题】：Soundcloud API Stream different songsSoundcloud API 串流不同的歌曲
【发布时间】：2017-04-06 22:28:14
【问题描述】：

我正在尝试根据我通过 onclick 函数传递的 trackid 创建一个简单的 javascript soundcloud 播放器。

这是我的html：

<div id="gs-play" onclick="play(309689093, this.id)" class="fa fa-3x fa-play">play/pause</div>
<div id="gs-play2" onclick="play(316017522, this.id)" class="fa fa-3x fa-play">play/pause</div>
<div id="gs-play3" onclick="play(315363199, this.id)" class="fa fa-3x fa-play">play/pause</div>

这是我的 javascript：

SC.initialize({
    client_id: 'CLIENT_ID'
});
var is_playing = false,
    sound;
function play(trackid, id){
    var id = id;
    var url = '/tracks/' + trackid;

    if( sound ) {
        if(is_playing) {
            sound.pause();
            document.getElementById(id).classList.toggle('fa-pause');
            is_playing = false;
        } else {
            sound.play();
            document.getElementById(id).classList.toggle('fa-pause');
            is_playing = true;
        }
    } else {
        SC.stream(url).then(function(obj) {
            if (obj.options.protocols[0] === 'rtmp') {
                obj.options.protocols.splice(0, 1); }
            obj.play();
            document.getElementById(id).classList.toggle('fa-pause');
            sound = obj;
            is_playing = true;
        });
    }
}

这很好用，但是我在播放/暂停功能方面遇到了问题，因为当然，在歌曲未完成sound===false 之前，即使我单击另一个，它也会始终播放/停止当前曲目分区。这是JSfiddle，以便更好地了解行为。

另外，我看到了 SC API 的文档，但我不明白如何访问流式轨道的信息（标题、持续时间、艺术品......）

编辑：

我想出了一个解决方案，通过以下方式检索当前的流媒体轨道：

SC.get(url).then(function(data){
  oldid = data.id;
});

如果旧 id 等于新 id 则暂停。我的切换功能仍然存在一些问题（仅切换正在播放的功能），我试图不使用框架。这是已编辑的script。

【问题讨论】：

标签： javascript api soundcloud

【解决方案1】：

对于任何对代码感兴趣的人，我已经修复了添加一个

SC.get(url).then(function(data){
  oldid = data.id;
});

然后检查oldid === trackid是否像这样：

SC.initialize({
    client_id: 'CLIENT_ID'
});
var oldid;
var is_playing = false,
    sound;
function play(trackid, id){
    var id = id;
    var url = '/tracks/' + trackid;

    if( oldid === trackid) {
        if(is_playing) {
            sound.pause();
            document.getElementById(id).classList.toggle('fa-pause');
            is_playing = false;
        } else {
            sound.play();
            document.getElementById(id).classList.toggle('fa-pause');
            is_playing = true;
        }
    } else {
        SC.stream(url).then(function(obj) {
            if (obj.options.protocols[0] === 'rtmp') {
                obj.options.protocols.splice(0, 1); }
            obj.play();
            document.getElementById(id).classList.toggle('fa-pause');
            sound = obj;
            SC.get(url).then(function(data){
                oldid = data.id;
                        });
            console.log(sound.id);
            is_playing = true;
        });

    }
}

这里是JSFIddle

【讨论】：