sdk - 如何使用JS SDK动态嵌入 "tiny"版本的Soundcloud播放器？

Question

我正在为一位音乐 Composer 建立一个网站。他想通过 Soundcloud 发布他的作品样本，并将其中一些样本嵌入到他的网站上。他有一个高级帐户。

我想让这对他来说尽可能简单(他不是极客)。基本上，我想让他从浏览器的地址栏中复制并粘贴歌曲的 URL，然后让我的应用程序为他完成剩下的工作。

这实际上做起来相对容易 - 我成功地让它与播放器的标准版本一起工作。但是我找不到以编程方式嵌入播放器的微型版本的工作方式。在 Soundcloud oEmbed 引用中没有提到微型播放器，只是将 maxheight 参数设置为 18 并不适合我。

问题是，我需要在每个页面上实际生成嵌入，因为主页上嵌入的同一首歌曲应该使用微型播放器呈现，而在子页面上应该是完整的标准播放器 - 因此我不能只允许他将嵌入代码从 soundcloud 复制并粘贴到我的应用程序，因为那样我要么有一个微型播放器嵌入代码，要么有一个标准播放器代码可用，而不是两者都有。为同一首歌复制和粘贴两个不同的嵌入代码对于这么简单的事情来说似乎太麻烦了。

另一件事是我无法正确测试它，因为我自己没有高级帐户而且我无权访问他的帐户.. 如果开发人员有办法“模拟”一个会很酷用于开发目的的高级帐户...

感谢所有帮助!

丹

Answer 1

不幸的是，/oembed 目前仅适用于常规小部件(Flash 的 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 对。在我的示例中，我使用 { 和 } 作为要插入的变量的分隔符，但它当然可以是您的语言或模板引擎要求的任何内容。

为了让您的客户能够只给您一个轨道 URL，您需要向 /resolve 端点发出 API 请求，以从轨道 URL(永久链接)检索轨道 ID。您需要注册为开发人员才能拥有 client_id 来授权对 API 的请求。我在 another answer here 中描述了如何使用 JavaScript 执行此操作.

如果您不希望对 API 发出请求，您也可以要求您的客户向您提供他们可以轻松地从任何声音中检索或通过点击“分享”按钮在 SoundCloud 上设置的嵌入代码，然后提取使用正则表达式的声音或设置 ID。

这是一个插入小部件的示例(也使用 SoundCloud JS SDK)http://jsbin.com/OLUloX/1/edit