如何使用JS SDK動態地嵌入Soundcloud播放器的「微小」版本？

我正在建立一個音樂作曲家的網站。他想通過Soundcloud發佈他的作品樣本，並在他的網站上嵌入一些樣本。他有一個高級帳戶。如何使用JS SDK動態地嵌入Soundcloud播放器的「微小」版本？

我想使這個儘可能容易爲他（他是不是沒有怪胎）。基本上，我想讓他只複製&從瀏覽器的地址欄粘貼歌曲的URL，並讓我的應用程序爲他完成剩下的工作。

這是比較容易做的其實 - 我成功地將其與播放器的標準版本。但我無法找到一種以編程方式嵌入微型版本播放器的工作方式。沒有提到Soundcloud oEmbed參考中的小玩家，只是將maxheight參數設置爲18並不適合我。

的問題是，我需要真正產生嵌入在每個頁面上，因爲嵌入在主頁上同一首歌應該用微型播放器進行渲染，而在子頁面應該是完整的標準播放器 - 因此我不能只允許他複製&將soundcloud中的嵌入代碼粘貼到我的應用程序中，因爲我可能會有一個小型播放器嵌入代碼或可用的標準播放器代碼，而不是兩者都可用。複製&爲同一首歌粘貼兩個不同的嵌入代碼似乎太麻煩了，對於這樣一個簡單的事情。

另一件事情是我無法正確地測試這個，因爲我沒有一個高級帳戶自己，我沒有進入他的賬戶..將是冷靜，如果有開發商以「模擬」方式一個高級帳戶用於開發目的...

感謝任何及所有的幫助！

丹

來源

2013-02-15 Dan Kadera

不幸的是，/oembed只是在一瞬間適用於常規部件（閃存HTML5）。

但是，您可以建立任何他們自己的HTML。這裏有一個小小的插件嵌入一個模板：

<object height="18" width="100%"> 
    <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></param> 
    <param name="allowscriptaccess" value="always"></param> 
    <param name="wmode" value="transparent"></param> 
    <embed wmode="transparent" allowscriptaccess="always" height="18" width="100%" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></embed> 
</object>

並定期插件的模板：

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}{widgetParams}"></iframe>

你應該把這些轉換成字符串（不換行），並在這些字符串進行變量代換。我不確定你正在使用什麼語言，但大多數語言都有內置的。

對於我大部分時間寫的JavaScript，您可以使用Douglas Crockford的supplant function。

的變量是trackId爲它的值應該是正整數，widgetParams，對於其值應該像&color=ff6600&auto_play=false，即key=value對與&前綴。我用{和}作爲分隔符的變量，在我的例子進行插值，但它可能，當然，是無論你的語言或模板引擎需要它的人。

爲了讓客戶能夠給你一個跟蹤網址，你需要做一個API請求到/resolve端點從跟蹤URL（固定鏈接）檢索跟蹤ID。您需要註冊爲開發人員才能讓client_id授權對API的請求。我已經描述瞭如何在JavaScript中使用another answer here。

如果您不希望對API發出請求，也可以讓您的客戶端爲您提供他們可以輕鬆從任何聲音中檢索的嵌入代碼，或通過點擊「共享」按鈕在SoundCloud上設置嵌入代碼，然後提取聲音或設置ID使用正則表達式。

這裏是如何做到這一點的工作，以插入一個小部件（也使用JS的SoundCloud SDK）http://jsbin.com/OLUloX/1/edit

來源

2013-02-15 18:12:30

哇，我很驚訝一個例子！非常詳細..非常感謝，這是完美的！我已經在使用API來解析永久鏈接，以便獲取歌曲的標題，並使其適應於獲得「api」。就像你指出的那樣，網址將變得輕而易舉，並且HTML可以通過Javascript在客戶端輕鬆組裝。接受你的答案，雖然我有點擔心Soundcloud未來可能會改變這個解決方案，但這是一個令人不安的未來的問題：o）再次感謝！ – 2013-02-16 00:21:35

只是一個快速的報告：作品像一個魅力！實際上，這個解決方案的工作原理非常好，我可以使用微型版本的播放器從我的非高端帳戶中嵌入曲目，而我以前認爲這是一個純粹的高級選項...？所以也許有一個我們發現的錯誤...; o） – 2013-02-16 00:56:19

tssssssssss :-) – 2013-03-14 18:08:01

如何使用JS SDK動態地嵌入Soundcloud播放器的「微小」版本？

回答

相關問題