SoundCloud SDK Play Function
Why is trackId undefined on the first play press?
After a track is skipped, the play feature works as expected.
I'm building a player with the SoundCloud Javascript SDK, and I've run into a snag. When play is pressed, the variable trackId is undefined. However, I can skip tracks to get successful plays of each song in the example account.
*Note: I had this working with the HTML5 widget and api, but that includes an iframe, which will not work with iPhone audio playback, so I need to work this out with the javascript SDK.
Thanks in advance!
Development Area: http://dev-mountvalor.legendarylion.com/
Documentation: 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
You should move the creation of track and rotation objects in time when songs are already loaded, inside:
SC.get("/resolve/?url=https://soundcloud.com/" + setList, {limit: 52})
.then(function(userReturn){
Check plunk
链接地址: http://www.djcxy.com/p/65306.html上一篇: 无法在Netbeans 6.9.1中创建Zend Framework项目
下一篇: SoundCloud SDK播放功能