如何为每首曲目添加播放和停止按钮？答案

【问题标题】：How to add a play and stop button for each track?如何为每首曲目添加播放和停止按钮？
【发布时间】：2015-06-21 12:07:54
【问题描述】：

我使用 Soundcloud API 在我的网站中加载曲目列表。我想知道的是为每个曲目添加一个播放和停止按钮来控制曲目。当您在播放当前歌曲时单击一首新歌曲时，它应该停止当前歌曲并播放新歌曲。我怎样才能做到这一点。想出了以下内容，但它会给我一个错误：GET https://api.soundcloud.com/tracks/stream?oauth_token=1-134590-9095247-3d1021a057c78d8 404 (Not Found) stream:1 GET https://api.soundcloud.com/tracks/stream?oauth_token=1-134590-9095247-3d1021a057c78d8 404 (Not Found)。

SC.get('/users/' + USER + '/tracks', function(tracks) {

            var count = 0;

            $(tracks).each(function(index, track) {
                count++;

                $('#playlist').append($('<li></li>').html('<a href="#" id="start">Start</a> <a href="#" id="stop">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
                //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
                $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');


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

                $('#stop').click(function(e) {
                    e.preventDefault();
                    track.stop();
                });
            });


            });

        });

留意一些建议。提前致谢。卡斯珀

【问题讨论】：

标签： javascript jquery html api soundcloud

【解决方案1】：

注意：我不确定如何修复该错误，因为我没有使用过该 API。但是，我确实看到您的代码存在一个问题，一旦您将曲目附加到 HTML 中，就会导致错误。

建议：使用类而不是 ID。如果您在页面上加载多个具有相同 ID 的曲目，则在尝试通过 JavaScript/jQuery 与它们进行交互时，您将无法获得理想的结果。

另外，将.click 方法移到.each 之外。无需为附加的每个轨道重复创建相同的事件侦听器。您甚至可以将这些方法放在 SC.get 函数之外。

// with classes
SC.get('/users/' + USER + '/tracks', function(tracks) {

    var count = 0;

    $(tracks).each(function(index, track) {
        count++;

        $('#playlist').append($('<li></li>').html('<a href="#" class="start">Start</a> <a href="#" class="stop">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
        //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
        $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');
    });

    SC.stream('/tracks', function(track) {
        $('.start').click(function(e) {
            e.preventDefault();
            track.start();
        });

        $('.stop').click(function(e) {
            e.preventDefault();
            track.stop();
        });
    });
});

如果您愿意，可以使用 ID 执行此操作，但您必须更改设置 ID 的方式以使其唯一：

// with IDs
SC.get('/users/' + USER + '/tracks', function(tracks) {

    var count = 0;

    $(tracks).each(function(index, track) {
        count++;

        $('#playlist').append($('<li></li>').html('<a href="#" id="start_' + count + '">Start</a> <a href="#" id="stop_' + count + '">Stop</a>' + count + ' / ' + track.title + ' - ' + track.playback_count));
        //$('#cover').append($('<li></li>').css('background-image', "url('" + track.artwork_url + "')");
        $("#cover").append('<div><img src="' + track.artwork_url.replace('-large', '-t500x500') + '"></div>');
    });

    SC.stream('/tracks', function(track) {
        $('[id^="start_"]').click(function(e) {
            e.preventDefault();
            track.start();
        });

        $('[id^="stop_"]').click(function(e) {
            e.preventDefault();
            track.stop();
        });
    });
});

【讨论】：