6

I've just started learning javascript and as my first attempt I'd like to create custom audio player which uses soundcloud's api as a source for music.

So far this is what I got set up:

<!DOCTYPE html>
<html>
<head>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>

<script>
window.onload = function() {
SC.initialize({
  client_id: '10e27db0dacd00954d7160b4c092a6e2' //Demo ID
});

SC.stream("/tracks/75868018", function(sound){
    $("audio-test").attr("src", sound.uri);
});
};
</script>



</head>
<body>

<audio id="audio-test" controls></audio>

</body>
</html>
Ilja
  • 44,142
  • 92
  • 275
  • 498
  • Need a little more to go on than this - can you put the javascript control code in a pastebin so we can take a glance? – CodeMoose Mar 04 '13 at 18:48
  • @CodeMoose added it, also added link to blog post which I'm using for this html5 player. – Ilja Mar 04 '13 at 18:56

2 Answers2

8

Ok, got it figured out. The problem was the .stream() - it's meant to deliver a prepackaged player, deployed by the .play() function.

If you use SC.get() instead, you'll actually access the properties of the track, and be able to embed it in an audio tag. See my code: http://jsfiddle.net/LpzpK/6/

There's still a problem - the tracks are marked as 401 forbidden, so the player is only ever "Loading". You'll have to find a way to make the tracks you want to play public.

CodeMoose
  • 2,964
  • 4
  • 31
  • 56
  • Thank you for great help, I think I've seen a glimpse of how to deal with 401 forbidden somewhere in documentation, I'll try to figure it out ;) – Ilja Mar 04 '13 at 21:17
  • 5
    got it working! just need to append /stream?client_id=YOUR_ID to sound.uri ;)) thnx again for help! – Ilja Mar 04 '13 at 21:33
  • @Ilja did you guys get a solution for this – Lakshay Dulani Jan 18 '16 at 08:08
  • @Lakshay, not really we went with spotify api in the end and manually embedding souncloud url for tracks that were not available on it. That was a while ago though, I'm sure their api has changed a lot since, maybe this is now possible. – Ilja Jan 18 '16 at 09:03
2

At a cursory glance, it looks like all soundcloud API objects come with a URI property that links directly to the resource. In your case, it would be sound.uri.

At the top of your player code, you have an <audio> tag - my guess is you'll want to set it's src to the URI value for the track you're playing. You can do this by attaching an ID to it and calling 

SC.stream("/tracks/293", function(sound){
    $("[audio_id]").attr("src", sound.uri);
});

replacing [audio_id] with whatever ID you choose for the tag. You'll probably still have to do something to reinitialize/restart the player each time it changes, but that will hopefully get you started. Let me know how it works!

CodeMoose
  • 2,964
  • 4
  • 31
  • 56
  • Tried it doesn't seem to work. I simplified my player dramatically to better understand everything, but I still can't get it to work, here is my new code http://pastebin.com/A76pgjMf – Ilja Mar 04 '13 at 20:03
  • I'll drop this into a fiddle and toy around with it - back to you in a bit – CodeMoose Mar 04 '13 at 20:08
  • I'm not getting the callback function to run. Do you have to do anything to instantiate the object (var SC = new soundcloud();) or something? – CodeMoose Mar 04 '13 at 20:11
  • Let me check documentation – Ilja Mar 04 '13 at 20:13
  • Can you see that "sound" function, not sure but, should it be somehow called when user clicks the play button, so it puts that src in? – Ilja Mar 04 '13 at 20:16
  • Yes - when the user clicks play, it should call a function that has that SC.stream in it. I can't really test it without asking for your app_id though – CodeMoose Mar 04 '13 at 20:37
  • I created demo app which I'll than delete, but for now you can test it with this id: 10e27db0dacd00954d7160b4c092a6e2 – Ilja Mar 04 '13 at 20:39
  • It doesn't alert anything, but in console it says that it can't find variable sound ;/ – Ilja Mar 04 '13 at 20:44
  • Thanks - just found it myself =o) – CodeMoose Mar 04 '13 at 20:52
  • I found this method SC.stream(trackPath, [options], [callback]) , I think that trackPath could be what we need instead of sound.uri ? You can read more on that page we found. – Ilja Mar 04 '13 at 20:54
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25556/discussion-between-ilya-knaup-and-codemoose) – Ilja Mar 04 '13 at 20:56