HTML5自定义播放器不与Soundcloud api工作uri

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

无论如何，由于某些原因，当我通过Soundcloud API为播放器生成src=""时，它无法正常工作。基本上我从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.csshttp://pastebin.com/HBUFvUw2
reset.csshttp://pastebin.com/jstmq0dB
player.js（插件）http://pastebin.com/MKrUgRDF

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

来源

2013-03-06 Ilja

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

参见my fiddle here。如果这不适合你，让我知道，我们会弄清楚！

编辑：我只是试了一遍，它现在不工作。给我一分钟来弄明白。

编辑II：保持客户端ID但改变sound.uri到sound.stream_url似乎已经解决了。看起来sound.uri链接会提示音频播放器无法播放的301重定向，但sound.stream_url直接链接到媒体。查看更新的小提琴链接。

来源

2013-03-06 14:33:20 CodeMoose

那个/ strem？client_id的东西是在我将它添加到url之前，我在歌曲上收到了一个401禁止的错误，所以他们不会播放，我设法修复它的唯一方法是通过添加该部分到网址。我认为jsfiddle不起作用，因为Soundcloud sdk不包括在内。此外，它自己（在默认播放器中）工作正常，但是一旦我将jQuery自定义播放器插件应用于音频元素，它就会说src是不设防/未知的 – Ilja 2013-03-06 14:38:32

是的，这一切都太快了。我不知道如何在没有它的情况下运行它 - 但我现在提供的代码应该适用于你。 – CodeMoose 2013-03-06 14:44:46

小提琴中提供的代码在默认的浏览器播放器下工作正常，但是一旦我将插件应用到它，仍然没有工作，并且说它是“未定义的”，那么您是否有Dropbox帐户？我可以将你添加到我的项目文件夹中，这就是我现在主持播放器的地方 – Ilja 2013-03-06 14:52:28

HTML5自定义播放器不与Soundcloud api工作uri

回答

相关问题