如何将播放暂停按钮添加到Soundcloud API

Question

我目前正在使用Soundcloud应用程序，但现在我被卡住了。我使用的是HTTP API而不是Widget。我在我的网站上导入每个专辑的曲目列表，并带有播放/暂停按钮。我想要的是每个曲目的每个播放/暂停按钮都可以控制。

现在在Codeacademy上，他们将使用：

SC.stream('/tracks/108816655', function(sound) {
            $('#start').click(function(e) {
                e.preventDefault();
                sound.start();
            });
            $('#stop').click(function(e) {
                e.preventDefault();
                sound.stop();
            });
        });

这很好用，但不符合我的愿望。因为我如何才能获得当前的trackID来播放特定的歌曲？

我是这样上来的。这几乎符合我的愿望。它现在播放特定的歌曲，当你播放另一首时，它会播放该歌曲。我唯一缺少的是我可以暂停那首特定曲目的歌曲的可能性。所有这些我都想用一个按钮来完成并切换该类。但我不知道这是否是实现这一目标的正确方法。

$('.play').click(function(event) {
                event.preventDefault();
                var trackID = $(this).closest('li').attr('data-id'); // Even kijken hoe je de li kunt krijgen omdat je nested nested hebt omdat ik nu gebruik maak van td dus de parent is geen li maar td
                console.log(trackID);
                $('#playlist li').removeClass('active');
                $(this).parent().addClass('active'); 
                $(this).toggleClass('play pause');
                if (nowPlaying) {
                    nowPlaying.stop();
                }
                SC.stream('/tracks/' + trackID, function(sound) {
                    sound.play();
                    nowPlaying = sound;
                });
            }); 

我试图制作一个JSFiddle，但我无法完成Soundcloud API的链接。很抱歉。这是小提琴。

在编写代码之前，我使用soundcloud SC.initialize函数，其中定义了client_id和redirect_uri。

Answer 1

请深入了解SoundManager2方法。http://www.schillmania.com/projects/soundmanager2/

这里我有一个演示停止/启动/暂停的工作示例：

Track = function (trackId){
    var currentTrack = "";
   SC.initialize({
        client_id: "17a992358db64d99e492326797fff3e8"
    });
    SC.stream("http://api.soundcloud.com/tracks/" + trackId, function(sound){
        currentTrack = sound;
    });
    this.play = function() {
        currentTrack.play();
    };
    this.pause = function() {
        currentTrack.pause();
    };
    this.stop = function() {
        currentTrack.stop();
    };
};
Rotation = function(tracks) {
    var currentTrack = tracks[0];
    this.currentTrack = function () {
        return currentTrack;
    };
};
$(document).ready (function(){
    var songs = [{"soundcloud_id":"108816655"},{"soundcloud_id":"79408289"}]
    var rotation = new Rotation(songs);
    var currentTrack = rotation.currentTrack();
    var currentPlayingTrack = new Track(currentTrack.soundcloud_id);
    $('#play').on('click', function(event){
        currentPlayingTrack.play();
        $('#pause').show();
        $('#play').hide();
    });
    $('#pause').on('click', function(event){
        currentPlayingTrack.pause();
        $('#pause').hide();
        $('#play').show();
    });
    $('#stop').on('click', function(event){
        currentPlayingTrack.stop();
        $('#pause').hide();
        $('#play').show();
    });        
});

http://codepen.io/bnz/pen/Qbadwg