Question

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

无论如何，由于某种原因，当我通过Soundcloud api为玩家生成src=""时，它无法正常工作。基本上我从Soundcloud获得歌曲网址，然后将其作为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

Answer 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直接链接到媒体。请参阅更新的小提琴链接。

HTML5自定义播放器无法使用Soundcloud api uri

1 个答案: