SoundCloud SDK 播放功能 - trackId 未定义
SoundCloud SDK Play Function - trackId Undefined
为什么第一次播放时 trackId 未定义?
跳过曲目后,播放功能正常运行。
我正在使用 SoundCloud Javascript SDK 构建一个播放器,但我 运行 遇到了麻烦。按下播放时,变量 trackId 未定义。但是,我可以跳过曲目以成功播放示例帐户中的每首歌曲。
*注意:我使用了 HTML5 小部件和 api,但它包含一个 iframe,它不适用于 iPhone 音频播放,所以我需要使用 javascript SDK 解决这个问题。
提前致谢!
开发区域:http://dev-mountvalor.legendarylion.com/
文档:https://developers.soundcloud.com/docs/api/sdks#stream
var songs=[{}];
// function getPlaylist(){
// // currentTrack = songs[1].soundcloud_id;
// // console.log(songs[1].soundcloud_id);
// // console.log(currentTrack);
// }
var setList = 'testing-mountain/tracks';
SC.initialize({
client_id: "ae0b7cf303a1217a43a57c3658e673ff"
});
SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52}, function(userReturn){
// console.log(userReturn);
// console.log(userReturn.tracks[1].title);
// console.log(userReturn.length);
// iterate through the json and snag the stuff we need, create an associative array out of it
for (var i = 0; i < userReturn.length; i++) {
songs.push(
{"title" : userReturn[i].title,
"song_url" : "https://soundcloud.com/",
"soundcloud_id" : userReturn[i].id,
"artwork" : userReturn[i].artwork_url}
);
}
// Remove the proto addition to the object
songs.shift();
console.log(songs);
// currentTrack=songs[1].soundcloud_id;
// console.log(currentTrack);
// console.log(songs);
// console.log(songs[1].soundcloud_id);
// trackID = (songs[1].soundcloud_id);
// console.log('trackID is equal to '+ trackID);
// $( "#track-title" ).empty();
// $( "#track-title" ).append( "<p> Now Playing: " + userReturn[0].title + "</p><img class='player-thumb' src='" + userReturn[0].artwork_url + "' alt=''>" );
// getPlaylist();
});
Track = function (trackId){
//Testing mountain sample track
// var trackId = '240347155';
//Mount Valor sample track
// var trackId = '241728584';
// var setList = 'mountvalor/tracks';
SC.stream("/tracks/" + trackId, function(sound){
player = sound;
});
this.play = function() {
player.play();
};
this.pause = function() {
player.pause();
};
this.stop = function() {
player.stop();
};
// console.log(trackId);
};
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;
console.log(currentTrack);
console.log(currentIndex);
$( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
return currentTrack;
};
this.backTrack = function () {
var currentIndex = tracks.indexOf(currentTrack);
var nextTrackIndex = currentIndex - 1;
var nextTrackId = tracks[nextTrackIndex];
currentTrack = nextTrackId;
console.log(currentTrack);
console.log(currentIndex);
$( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
return currentTrack;
};
};
$(document).ready (function(){
$('#volume').on('change', function(event){
player.setVolume($(this).val());
// console.log($(this).val());
});
// console.log(songs);
var rotation = new Rotation(songs);
var currentTrack = rotation.currentTrack();
var currentPlayingTrack = new Track(currentTrack.soundcloud_id);
$('#play').on('click', function(event){
currentTrack = rotation.currentTrack();
currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('.hero-play-button').on('click', function(event){
// console.log($(this).attr('id'));
// grab the id of the current element clicked
var circlePlayButtonId = ($(this).attr('id'));
//replace the string in that element of the id to get the index counter from the id
circlePlayButtonId = circlePlayButtonId.replace('circle-play-', '');
// console.log('The replaced index variable is ' + circlePlayButtonId);
//play the song based on the index pulled from the id when clicked
// player.skip(circlePlayButtonId);
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event){
currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#next').on('click', function(event){
currentPlayingTrack.stop();
currentTrack = rotation.nextTrack();
currentPlayingTrack = new Track(currentTrack.soundcloud_id);
currentPlayingTrack.play();
$('#play').hide();
$('#pause').show();
});
$('#prev').on('click', function(event){
currentPlayingTrack.stop();
currentTrack = rotation.backTrack();
currentPlayingTrack = new Track(currentTrack.soundcloud_id);
currentPlayingTrack.play();
$('#play').hide();
$('#pause').show();
console.log('backtrack!');
});
}); // End Document Ready
你应该在歌曲已经加载的时候及时移动轨道和旋转对象的创建,里面:
SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52})
.then(function(userReturn){
勾选plunk
为什么第一次播放时 trackId 未定义?
跳过曲目后,播放功能正常运行。
我正在使用 SoundCloud Javascript SDK 构建一个播放器,但我 运行 遇到了麻烦。按下播放时,变量 trackId 未定义。但是,我可以跳过曲目以成功播放示例帐户中的每首歌曲。
*注意:我使用了 HTML5 小部件和 api,但它包含一个 iframe,它不适用于 iPhone 音频播放,所以我需要使用 javascript SDK 解决这个问题。
提前致谢!
开发区域:http://dev-mountvalor.legendarylion.com/
文档:https://developers.soundcloud.com/docs/api/sdks#stream
var songs=[{}];
// function getPlaylist(){
// // currentTrack = songs[1].soundcloud_id;
// // console.log(songs[1].soundcloud_id);
// // console.log(currentTrack);
// }
var setList = 'testing-mountain/tracks';
SC.initialize({
client_id: "ae0b7cf303a1217a43a57c3658e673ff"
});
SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52}, function(userReturn){
// console.log(userReturn);
// console.log(userReturn.tracks[1].title);
// console.log(userReturn.length);
// iterate through the json and snag the stuff we need, create an associative array out of it
for (var i = 0; i < userReturn.length; i++) {
songs.push(
{"title" : userReturn[i].title,
"song_url" : "https://soundcloud.com/",
"soundcloud_id" : userReturn[i].id,
"artwork" : userReturn[i].artwork_url}
);
}
// Remove the proto addition to the object
songs.shift();
console.log(songs);
// currentTrack=songs[1].soundcloud_id;
// console.log(currentTrack);
// console.log(songs);
// console.log(songs[1].soundcloud_id);
// trackID = (songs[1].soundcloud_id);
// console.log('trackID is equal to '+ trackID);
// $( "#track-title" ).empty();
// $( "#track-title" ).append( "<p> Now Playing: " + userReturn[0].title + "</p><img class='player-thumb' src='" + userReturn[0].artwork_url + "' alt=''>" );
// getPlaylist();
});
Track = function (trackId){
//Testing mountain sample track
// var trackId = '240347155';
//Mount Valor sample track
// var trackId = '241728584';
// var setList = 'mountvalor/tracks';
SC.stream("/tracks/" + trackId, function(sound){
player = sound;
});
this.play = function() {
player.play();
};
this.pause = function() {
player.pause();
};
this.stop = function() {
player.stop();
};
// console.log(trackId);
};
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;
console.log(currentTrack);
console.log(currentIndex);
$( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
return currentTrack;
};
this.backTrack = function () {
var currentIndex = tracks.indexOf(currentTrack);
var nextTrackIndex = currentIndex - 1;
var nextTrackId = tracks[nextTrackIndex];
currentTrack = nextTrackId;
console.log(currentTrack);
console.log(currentIndex);
$( "#track-title" ).html( "<p> Now Playing: " + currentTrack.title + "</p><img class='player-thumb' src='" + currentTrack.artwork + "' alt=''>" );
return currentTrack;
};
};
$(document).ready (function(){
$('#volume').on('change', function(event){
player.setVolume($(this).val());
// console.log($(this).val());
});
// console.log(songs);
var rotation = new Rotation(songs);
var currentTrack = rotation.currentTrack();
var currentPlayingTrack = new Track(currentTrack.soundcloud_id);
$('#play').on('click', function(event){
currentTrack = rotation.currentTrack();
currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
});
$('.hero-play-button').on('click', function(event){
// console.log($(this).attr('id'));
// grab the id of the current element clicked
var circlePlayButtonId = ($(this).attr('id'));
//replace the string in that element of the id to get the index counter from the id
circlePlayButtonId = circlePlayButtonId.replace('circle-play-', '');
// console.log('The replaced index variable is ' + circlePlayButtonId);
//play the song based on the index pulled from the id when clicked
// player.skip(circlePlayButtonId);
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event){
currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
$('#next').on('click', function(event){
currentPlayingTrack.stop();
currentTrack = rotation.nextTrack();
currentPlayingTrack = new Track(currentTrack.soundcloud_id);
currentPlayingTrack.play();
$('#play').hide();
$('#pause').show();
});
$('#prev').on('click', function(event){
currentPlayingTrack.stop();
currentTrack = rotation.backTrack();
currentPlayingTrack = new Track(currentTrack.soundcloud_id);
currentPlayingTrack.play();
$('#play').hide();
$('#pause').show();
console.log('backtrack!');
});
}); // End Document Ready
你应该在歌曲已经加载的时候及时移动轨道和旋转对象的创建,里面:
SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52})
.then(function(userReturn){
勾选plunk