如何为每个曲目添加播放和停止按钮
How to add a play and stop button for each track?
我利用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();
});
});
});
});
留意一些建议。提前谢谢。卡斯帕
注意:我不确定如何解决该错误,因为我没有使用该 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();
});
});
});
相关文章:
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- 在 jquery 中定位暂停和播放按钮
- Videojs巨大的播放按钮
- 在 html5 中使用暂停和播放按钮
- 如何使用html5制作播放按钮
- Youtube无铬播放器 - 更改大开始播放按钮
- 吸引人 - html5 导出添加了带有播放按钮的第一张幻灯片
- 更改 JWPlayer 显示图标(播放按钮)的不透明度
- 嵌入视频播放器播放按钮可同时播放所有视频播放器
- 单击播放按钮后延迟视频
- 可以't使用居中的大播放按钮暂停VideoJS播放器
- 使用播放按钮和/或元数据API(Spotify)进行现场演示
- 我正在制作我的作品集,我想使用 Spotify API 来显示我当前正在收听的内容,但不想使用“播放”按钮
- 视频结束后显示播放按钮
- 如何删除视频播放结束时的大播放按钮 (VideoJS)
- 如何循环播放按钮
- HTML5音乐播放器外部播放按钮
- 为什么我的播放按钮不起作用
- 多个自定义 Vimeo 播放按钮
- 检测何时单击了我网站视频中的播放按钮