Soundcloud API流不同的歌曲

我試圖創建一個簡單的javascript soundcloud播放器，基於我通過onclick函數傳遞的trackid。Soundcloud API流不同的歌曲

這是我的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即使我點擊另一個div，它也會始終播放/停止當前曲目。以下是JSfiddle以更好地理解行爲。

而且，我看到了SC API的文檔，但我不知道如何來訪問流式軌道的信息（標題，持續時間，藝術品......）

編輯：

我想出了一個解決方案，檢索當前的流媒體軌道具有：

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

，然後暫停它，如果舊的ID等於新的ID。我仍然有一些問題與切換功能（只切換正在播放），我試圖不使用框架。這是編輯的script。

來源

2017-04-06 GoingSolo

任何有興趣的代碼，我固定加入

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

來源

2017-04-18 15:43:38 GoingSolo

Soundcloud API流不同的歌曲

回答

相關問題