How can I automatically move to next sound after p

2020-02-20 06:02发布

问题:

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.

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.

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

Here is my code:

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

回答1:

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