如何使用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播放器的“微小”版本？

回答

相关问题