如何使用 Soundcloud api 获取流到 html5 音频播放器？答案

【问题标题】：How to use Soundcloud api to get stream into html5 audio player?如何使用 Soundcloud api 获取流到 html5 音频播放器？
【发布时间】：2013-03-04 18:32:26
【问题描述】：

我刚开始学习 javascript，作为我的第一次尝试，我想创建自定义音频播放器，它使用 soundcloud 的 api 作为音乐源。

到目前为止，这是我设置的：

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

【问题讨论】：

需要比这更多的工作 - 你能把 javascript 控制代码放在一个 pastebin 中以便我们看一眼吗？
@CodeMoose 添加了它，还添加了我用于此 html5 播放器的博客文章的链接。

标签： javascript html audio soundcloud

【解决方案1】：

好的，明白了。问题在于 .stream() - 它旨在提供由 .play() 函数部署的预打包播放器。

如果您改用SC.get()，您将实际访问轨道的属性，并能够将其嵌入到音频标签中。查看我的代码：http://jsfiddle.net/LpzpK/6/

还有一个问题 - 曲目被标记为 401 禁止，因此播放器只会“加载”。您必须找到一种方法来公开您想要播放的曲目。

【讨论】：

感谢您的大力帮助，我想我已经看到了如何处理文档中某处禁止的 401 的一瞥，我会尝试弄清楚 ;)
成功了！只需要将 /stream?client_id=YOUR_ID 附加到 sound.uri ;)) thnx 再次寻求帮助！
@Ilja 你们有解决方案吗
@Lakshay，我们最终并没有使用 spotify api 并手动嵌入 souncloud url 以获取其上不可用的曲目。不过那是不久前的事了，我敢肯定他们的 api 已经发生了很大变化，也许现在这是可能的。

【解决方案2】：

粗略一看，似乎所有 soundcloud API 对象都带有一个直接链接到资源的 URI 属性。在您的情况下，它将是 sound.uri。

在播放器代码的顶部，您有一个 <audio> 标签 - 我猜您可能希望将它的 src 设置为您正在播放的曲目的 URI 值。您可以通过为其附加一个 ID 并调用

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

用您为标签选择的任何 ID 替换 [audio_id]。每次播放器更改时，您可能仍然需要做一些事情来重新初始化/重新启动播放器，但这有望让您开始。告诉我它是如何工作的！

【讨论】：

试过了，好像不行。我大大简化了我的播放器以更好地理解一切，但我仍然无法让它工作，这是我的新代码pastebin.com/A76pgjMf
我会把它放在一个小提琴里，然后玩弄它 - 一会儿还给你
我没有让回调函数运行。您是否需要做任何事情来实例化对象（var SC = new soundcloud();) 或其他什么？
让我检查文档
你能看到那个“声音”功能吗，不确定，但是，当用户点击播放按钮时，它是否应该被调用，所以它把那个 src 放进去？