如何使用 JS SDK 动态嵌入“小”版本的 Soundcloud 播放器？

Question

我正在为一位音乐作曲家建立一个网站。他想通过 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