2013-03-06 47 views
1

我正在使用一個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

回答

3

看來問題是/stream?client_id=...。我擺脫了整個字符串並將sound.uri更改爲sound.stream_url,現在它正在流式傳輸(至少在Safari/FF OSX中)。

參見my fiddle here。如果這不適合你,讓我知道,我們會弄清楚!

編輯:我只是試了一遍,它現在不工作。給我一分鐘來弄明白。

編輯II:保持客戶端ID但改變sound.urisound.stream_url似乎已經解決了。看起來sound.uri鏈接會提示音頻播放器無法播放的301重定向,但sound.stream_url直接鏈接到媒體。查看更新的小提琴鏈接。

+0

那個/ strem?client_id的東西是在我將它添加到url之前,我在歌曲上收到了一個401禁止的錯誤,所以他們不會播放,我設法修復它的唯一方法是通過添加該部分到網址。我認爲jsfiddle不起作用,因爲Soundcloud sdk不包括在內。此外,它自己(在默認播放器中)工作正常,但是一旦我將jQuery自定義播放器插件應用於音頻元素,它就會說src是不設防/未知的 – Ilja 2013-03-06 14:38:32

+0

是的,這一切都太快了。我不知道如何在沒有它的情況下運行它 - 但我現在提供的代碼應該適用於你。 – CodeMoose 2013-03-06 14:44:46

+0

小提琴中提供的代碼在默認的瀏覽器播放器下工作正常,但是一旦我將插件應用到它,仍然沒有工作,並且說它是「未定義的」,那麼您是否有Dropbox帳戶?我可以將你添加到我的項目文件夾中,這就是我現在主持播放器的地方 – Ilja 2013-03-06 14:52:28

相關問題