5

我是 Javascript 和 Soundcloud SDK 的新手，所以如果我当前的解决方案偏离了基础，请告诉我如何改进它。

我正在构建一个自定义 Soundcloud 播放器，而不是使用预构建的小部件。我希望在播放完曲目后自动移至下一首曲目。我希望能够在不使用 Soundcloud 播放列表的情况下完成此操作。相反，我将拉入一个 JSON 曲目列表来播放。

我可以通过单击链接来播放、暂停、停止和跳过曲目，但我不确定如何判断曲目何时完成播放以触发该nextTrack功能。有什么建议么？

Soundcloud Javascript SDK 流媒体 API：http: //developers.soundcloud.com/docs/api/sdks#streaming

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>

<div class="music-player">
    <h4 class="trackTitle">Current track</h4>
    <a href="#" id="play">Play</a>
    <a href="#" id="pause" style="display:none;">Pause</a>
    <a href="#" id="stop">Stop</a>
    <a href="#" id="next">Next</a>
</div>

<script>

    Track = function (trackId){
        var currentTrack = "";

        SC.initialize({
            client_id: "CLIENT_ID"
        });

        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;
        };

        this.nextTrack = function () {
            var currentIndex = tracks.indexOf(currentTrack);
            var nextTrackIndex = currentIndex + 1;
            var nextTrackId = tracks[nextTrackIndex];
            currentTrack = nextTrackId;
            return currentTrack
        };
    };

    $(document).ready (function(){
        var songs = [{"title":"Sad Trombone","song_url":"https://soundcloud.com/sheckylovejoy/sad-    trombone","soundcloud_id":"18321000"},{"title":"AraabMUZIK - \"Beauty\"","song_url":"    https://soundcloud.com/selftitledmag/araabmuzik-beauty","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();
            $('.trackTitle').html(currentTrack.title);
            $('#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();
        });

        $('#next').on('click', function(event){
            currentPlayingTrack.stop();
            currentTrack = rotation.nextTrack();
            currentPlayingTrack = new Track(currentTrack.soundcloud_id);
            currentPlayingTrack.play();
            $('.trackTitle').html(currentTrack.title);
        });

    });

</script>
4

1 回答 1

7

您可以在创建轨道对象时实现 onfinish 方法，现在您可以将控制台输出替换为函数。

SC.stream("http://api.soundcloud.com/tracks/" + trackId, {onfinish: function(){
    console.log('track finished');
}}, function(sound){
    currentTrack = sound;
});
于 2013-07-14T13:05:05.910 回答