How to use Soundcloud api to get stream into html5 audio player?

蓝咒 提交于 2019-12-20 09:56:01

问题


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>

回答1:


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.




回答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!



来源:https://stackoverflow.com/questions/15208512/how-to-use-soundcloud-api-to-get-stream-into-html5-audio-player

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!