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

问题描述：

我利用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(); 
       }); 
      }); 


      }); 

     });

寻找一些建议。提前致谢。 Casper

答

注意：我不确定如何解决该错误，因为我没有使用该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，使他们独特：

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

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

相关推荐