SoundCloud API：使用oEmbed指定播放曲目的開始和停止時間

Question

我有一個與SoundCloud API集成的Web應用程序，用於搜索和播放曲目。我可以成功地通過使用SoundCloud oEmbed的API流軌道，像這樣：

scope.playTrack = function(track) { 
    SC.oEmbed(track.permalink_url, { auto_play: true }) 
    .then(function(oEmbed) { 
     scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html); 
     scope.$apply(); 
    }); 
}; 

綁定到該視圖的部件：

<div ng-bind-html="soundCloudWidget"></div > 

這是按預期工作。我的問題是我想以這種方式流式播放曲目，但是使用指定的開始和結束時間。我做了一些研究，發現一個看似相關StackOverflow question/answer是提到一個可以：

追加#t=12s聲音的URL在第12屆第二

構造URL就像當這工作啓動它：

https://soundcloud.com/griz/summer-97-ft-muzzy-bearr#t=54s

然而，對於start = '54s'我願做這樣的事情

scope.playTrackSection = function(track, start) { 
    SC.oEmbed(track.permalink_url, { auto_play: true, t: start }) 
    .then(function(oEmbed) { 
     scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html); 
     scope.$apply(); 
    }); 
}; 

或

scope.playTrackSection = function(track, start) { 
    var url = track.permalink_url + "#t=" + start; 
    SC.oEmbed(track.permalink_url, { auto_play: true }) 
    .then(function(oEmbed) { 
     scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html); 
     scope.$apply(); 
    }); 
}; 

，但無濟於事。 是否有任何可能的方式來指定這種類型的上下文中的開始時間？

獎勵積分：還有什麼方法可以指定播放歌曲停止播放的時間或時間？

Answer 1

想通了。 SoundCloud Widget API來救援！

爲了訪問提供SoundCloud Widget API的JavaScript對象，請將this script添加到您的html頁面。

該腳本將​​函數公開到全局範圍。它允許您從父頁面（小部件插入的頁面）控制小部件。 SC.Widget接受對iframe元素或其id的引用。

所以加入這個劇本，我能夠做這樣的事之後：

scope.playTrackSection = function(track, startTime, endTime) { 
    SC.oEmbed(track.permalink_url, { auto_play: true }) 
    .then(function(oEmbed) { 
     scope.soundCloudWidget = $sce.trustAsHtml(oEmbed.html); 
     scope.$apply(); 

     scope.iframe = document.getElementById('soundcloud_widget').querySelector('iframe'); 
     scope.widget = SC.Widget(scope.iframe); 

     scope.widget.seekTo(startTime); 
     scope.widget.bind('playProgress', function(needle) { 
     if (needle.currentPosition >= endTime) { 
      scope.widget.pause(); 
     } 
     }); 
    }); 
}; 

的HTML：

<div id="soundcloud_widget" ng-bind-html="soundCloudWidget"></div> 

也是很有知道scope.widget.bind('xxxx', ....)可用於綁定分成若干個Widget API的Event types。所以如果你想在用戶暫停，播放，完成，尋找等時發生某些事情，你可以將這些事件掛鉤。