1

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

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

问题是一旦页面加载它就会说src="unknown"（或类似的东西）

这是 HTML 标记，它演示了 Soundcloud api 和自定义播放器插件的使用。

<!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（插件） http://pastebin.com/MKrUgRDF

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

4

1 回答 1

3

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

在这里看我的小提琴。如果这对您不起作用，请告诉我，我们会解决的！

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

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

于 2013-03-06T14:33:20.340 回答