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

【问题标题】：How to add play pause button to Soundcloud API?如何将播放暂停按钮添加到 Soundcloud API？
【发布时间】：2015-06-27 08:48:17
【问题描述】：

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

现在他们将在 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 的链接。非常遗憾。 Here is the jsfiddle.

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

【问题讨论】：

标签： jquery soundcloud

【解决方案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

【讨论】：