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>
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.
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!
来源：https://stackoverflow.com/questions/15208512/how-to-use-soundcloud-api-to-get-stream-into-html5-audio-player