如何使用 JS SDK 动态嵌入 "tiny" 版本的声云播放器?



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

我想让这件事对他来说尽可能简单(他不是个怪胎)。基本上,我想让他只是复制&从浏览器的地址栏粘贴歌曲的URL,然后让我的应用程序为他完成剩下的工作。

事实上,这相对容易做到——我成功地将其用于标准版本的播放器。但我找不到一种以编程方式嵌入播放器小版本的工作方式。Soundcloud oEmbed参考中没有提到这个小播放器,仅仅将最大高度参数设置为18对我来说并不合适。

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

另一件事是,我无法正确测试,因为我自己没有高级帐户,也无法访问他的帐户。。如果有一种方法让开发人员为了开发目的"模拟"高级帐户,那就太酷了。。。

感谢您的帮助!

Dan

不幸的是,/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对。在我的示例中,我使用了{}作为变量的分隔符进行插值,但它当然可以是您的语言或模板引擎要求的任何形式

为了让您的客户端只给您一个曲目URL,您需要向/resolve端点发出API请求,从曲目URL(permalink)中检索曲目ID。您需要注册为开发人员才能拥有client_id来授权对API的请求。我已经在这里的另一个答案中描述了如何用JavaScript实现它。

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

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

相关内容

  • 没有找到相关文章

最新更新