使用Soundcloud Javascript SDK进行流媒体播放后，如何在上一曲目完成后自动移至下一个声音？ [英] How can I automatically move to next sound after previous track completes using the Soundcloud Javascript SDK for streaming?

问题描述

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

I'm new to Javascript and the Soundcloud SDK so if my current solution is way off base please let me know how it can be improved.

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

I'm building a custom Soundcloud player and not using a prebuilt widget. I'm looking to automatically move to the next track after a track is finished playing. I want to be able to accomplish this without using a Soundcloud playlist. Instead I will be pulling in a JSON list of tracks to play.

我可以点击链接播放，暂停，停止和跳过曲目，但我不知道如何告诉轨道何时完成播放以触发 nextTrack 功能。有什么建议吗？

I am able to play, pause, stop and skip tracks by clicking links but I am not sure how to tell when a track has completed playing in order to trigger the nextTrack function. Any suggestions?

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

Soundcloud Javascript SDK Streaming 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>

推荐答案

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

You can implement the onfinish method when creating the track object, now you can replace the console output with a function.

SC.stream("http://api.soundcloud.com/tracks/" + trackId, {onfinish: function(){
    console.log('track finished');
}}, function(sound){
    currentTrack = sound;
});

这篇关于使用Soundcloud Javascript SDK进行流媒体播放后，如何在上一曲目完成后自动移至下一个声音？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！