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

Question

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

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

这实际上相对容易 - 我成功地使用了标准版本的播放器.但我找不到以编程方式嵌入播放器的小版本的工作方式.没有提到Soundcloud oEmbed参考中的小玩家,只是将maxheight参数设置为18并不适合我.

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

另一件事是我无法正确测试这个,因为我自己没有Premium帐户,而且我无法访问他的帐户..如果开发人员有办法"模拟"Premium帐户,那会很酷发展目的......

感谢您的帮助!

担

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功能.

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

为了让您的客户能够只为您提供跟踪网址,您需要向/resolve端点执行API请求以从跟踪网址(固定链接)中检索跟踪ID.您需要注册为开发人员client_id才能授权对API的请求.我在这里用另一个答案描述了如何在JavaScript中完成它.

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

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