HTML5 自定义播放器不适用于 Soundcloud api uri答案

【问题标题】：HTML5 custom player not working with Soundcloud api uriHTML5 自定义播放器不适用于 Soundcloud api uri
【发布时间】：2013-03-06 12:34:40
【问题描述】：

我正在使用一个 jQuery 插件，它将简单的<audio></audio> 转换为一组不同的元素，这些元素不是由 javascript 控制的，基本上创建了一个自定义的 html5 播放器。您可以在此处找到有关此插件的博客文章：http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ 它深入解释了这个插件。

无论如何，由于某种原因，当我通过 Soundcloud api 为播放器生成 src="" 时它不起作用。基本上我从 Soundcloud 获取歌曲 url，然后将其作为 src 添加到音频标签中。

问题是，一旦页面加载，它就会显示src="unknown"（或类似的内容）

这里是演示如何使用 Soundcloud api 和自定义播放器插件的 HTML 标记。

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/player.css">

</head>
<body>

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

<!-- Javascript/jQuery -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src="/player.js"></script> <!-- /js/player.js -->

<script>
// Soundcloud
SC.initialize({
    client_id: '7a17129ba9cd5fff34f847e3539829b7'
});

SC.get("/tracks/81815566", {}, function(sound){
    $("#audio-test").attr("src", sound.uri + "/stream?client_id=7a17129ba9cd5fff34f847e3539829b7");
});

//Custom Player
$( function() { $( 'audio' ).audioPlayer(); } );
</script>

<!-- END Javascript/jQuery -->

</body>
</html>

以下是您可能需要查看播放器完整功能的其他文件：

player.css http://pastebin.com/HBUFvUw2
reset.css http://pastebin.com/jstmq0dB
player.js（插件） @ 987654324@

或者直接从这里下载整个项目： http://www.filedropper.com/example_1

【问题讨论】：

标签： javascript jquery html audio soundcloud

【解决方案1】：

看来问题出在/stream?client_id=...。我摆脱了整个字符串并将 sound.uri 更改为 sound.stream_url，现在它正在流式传输（至少在 Safari/FF OSX 中）。

见my fiddle here。如果这对您不起作用，请告诉我，我们会解决的！

编辑：我刚刚又试了一次，现在不行了。给我一分钟弄清楚。

EDIT II：保留客户端 ID，但将 sound.uri 更改为 sound.stream_url 似乎已修复它。似乎 sound.uri 链接提示音频播放器无法遵循的 301 重定向，但 sound.stream_url 直接链接到媒体。查看更新的小提琴链接。

【讨论】：

/strem?client_id... 的问题是，在我将它添加到 url 之前，我在歌曲上遇到了 401 禁止错误，所以他们不会播放，我设法修复它的唯一方法是通过将该部分添加到 url。而且我认为 jsfiddle 不起作用，因为不包括 Soundcloud sdk。此外，它本身（在默认播放器中）可以正常工作，但是一旦我将 jQuery 自定义播放器插件应用于音频元素，它就会说 src 是不受保护/未知的
是的，很快就明白了。我不知道没有它我是如何让它工作的——但是我在小提琴中得到的代码现在应该可以为你工作了。
小提琴中提供的代码在默认浏览器播放器上运行良好，但是一旦我将插件应用到它，仍然无法正常工作并说它是“未定义”，你有保管箱帐户吗？我可以将你添加到我的项目文件夹中，这就是我现在托管播放器的地方
我假设，在 src="" 实际添加到播放器之前调用该插件，这就是它认为它未定义的原因，有没有办法首先将 src="" 添加到音频标记并且仅在调用 player.js 插件之后？
抱歉，我没来得及，今天的工作简直是杀手锏。答案是什么？