2

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

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

这实际上相对容易做到——而且我成功地让它与标准版本的播放器一起工作。但我找不到以编程方式嵌入播放器的微型版本的工作方式。Soundcloud oEmbed 参考资料中没有提到小播放器,仅将 maxheight 参数设置为 18 对我来说并不适用。

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

另一件事是我无法正确测试这一点,因为我自己没有高级帐户,也无权访问他的帐户。如果开发人员有办法“模拟”高级帐户,那就太酷了开发目的...

感谢您的任何帮助!

4

1 回答 1

5

不幸的是,/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 的supplantfunction

变量trackId的值应该是正整数widgetParams,而值应该是类似的&color=ff6600&auto_play=false,即以 为key=value前缀的对&。在我的示例中,我使用{and}作为变量的分隔符以进行插值,但它当然可以是您的语言或模板引擎要求的任何内容。

为了让您的客户能够只为您提供跟踪 URL,您需要向/resolve端点发出 API 请求以从跟踪 URL(永久链接)中检索跟踪 ID。您需要注册为开发人员client_id才能授权对 API 的请求。我已经在此处的另一个答案中描述了如何在 JavaScript 中执行此操作。

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

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

于 2013-02-15T18:12:30.060 回答