如何动态嵌入“小"字样使用JS SDK的Soundcloud播放器的版本? [英] How to dynamically embed the "tiny" version of the Soundcloud player using the JS SDK?

问题描述

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

I'm building a website for a music composer. He'd like to publish samples of his work via Soundcloud and embed some of those samples on his website. He has a Premium account.

我想让他尽可能地容易(他不是怪胎).基本上，我想让他只复制&从浏览器的地址栏中粘贴歌曲的URL，然后让我的应用程序来完成剩下的工作.

I'd like to make this as easy as possible for him (he ain't no geek). Basically, I'd like to let him just copy & paste the song's URL from the browser's address bar and make my application do the rest for him.

实际上，这相对容易实现-我成功地使其与播放器的标准版本一起使用.但是我找不到以编程方式嵌入播放器小版本的可行方法.在Soundcloud oEmbed参考资料中没有提及微型播放器，仅将maxheight参数设置为18并不能解决我的问题.

That's relatively easy to do actually - and I successfully made it work with the standard version of the player. But I can't find a working way of programmatically embeding the tiny version of the player. There's no mention of the tiny player in the Soundcloud oEmbed reference and just setting the maxheight param to 18 doesn't do it for me.

问题是，我实际上需要生成嵌入在每个页面上，因为嵌入在主页上的同一首歌曲应使用微型播放器进行渲染，而在子页面上应该是完全标准的播放器-因此，我不能只允许他将声音云中的嵌入代码复制并粘贴到我的应用中，因为那样的话，我要么会有一个很小的播放器嵌入代码，要么有一个可用的标准播放器代码，而不能同时使用这两个代码.对于这么简单的事情，为同一首歌曲复制和粘贴两个不同的嵌入代码似乎太麻烦了.

The problem is, I need to actually generate the embed on every page, because the same song embedded on the home page should be rendered using the tiny player, whereas on a subpage it should be the full standard player - therefore I can't just allow him to copy&paste the embed code from soundcloud to my app, because I'd then either have a tiny player embed code or a standard player code available, not both of them. Copy&pasting two different embed codes for the same song seems too much trouble for such a simple thing.

另一件事是，我自己没有高级帐户，也无法访问他的帐户，因此我无法对其进行正确的测试.如果开发人员可以模拟"用于开发目的的高级帐户...

Another thing is I can't properly test this as I don't have a Premium account myself and I don't have access to his account.. would be cool if there was a way for developers to "mock" a Premium account for development purposes...

感谢所有帮助！

丹

推荐答案

不幸的是，/oembed目前仅适用于常规窗口小部件(Flash的HTML5).

Unfortunately, /oembed only works for regular widget (HTML5 of flash) at the moment.

但是，您可以自己为其中任何一个构建html.这是嵌入小部件的模板:

However, you can build the html for either of them yourself. Here's a template for tiny widget embed:

<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>

以及常规小部件的模板:

And the template for regular widget:

<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>

您应该将它们放入字符串中(没有换行符)，并对这些字符串执行变量插值.我不确定您使用的是哪种语言，但是大多数语言都是内置的.

You should put these into strings (without line breaks) and perform variable interpolation on these strings. I am not sure what language you are using, but most languages have this built in.

对于我经常写的JavaScript，您可以使用Douglas Crockford的 supplant函数.

For JavaScript, which I'm writing most of the time, you could use Douglas Crockford’s supplant function.

变量trackId的值应为正整数，而widgetParams的值应为&color=ff6600&auto_play=false之类，即以&为前缀的key=value对.在我的示例中，我已经使用{和}作为变量的定界符，但是当然，它可以是您的语言或模板引擎要求的任何变量.

The variables are trackId for which the value should be positive integer and widgetParams, for which the value should be something like &color=ff6600&auto_play=false, that is key=value pairs prefixed with &. I've used { and } as delimiters for variables to interpolate in my example, but it could, of course, be whatever your language or templates engine requires it to be.

为使您的客户仅能给您一个跟踪URL，您需要向/resolve终结点发出API请求以从跟踪URL(永久链接)中检索跟踪ID.您需要注册为开发人员才能拥有client_id来授权对API的请求.我已经在此处的另一个答案中描述了如何使用JavaScript进行操作.

For your client to be able to just give you a track URL, you'd need to do an API request to /resolve endpoint to retrieve track ID from track URL (permalink). You'd need to register as a developer to have client_id to authorise requests to the API. I've described how to do it in JavaScript in another answer here.

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

If you'd prefere not to do requests to the API, you could also ask your client to give you the embed code they can easily retrieve from any sound or set on SoundCloud by hitting "share" button, and then extract the sound or set ID using regular expression.

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

Here's an example of how this would work to insert a tiny widget (also using SoundCloud JS SDK) http://jsbin.com/OLUloX/1/edit

这篇关于如何动态嵌入“小"字样使用JS SDK的Soundcloud播放器的版本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！