¿Cómo insertar dinámicamente la versión "pequeña" del reproductor Soundcloud utilizando JS SDK?

soundcloud api doc

Question

Estoy construyendo un sitio web para un compositor de música. Le gustaría publicar muestras de su trabajo a través de Soundcloud e insertar algunas de esas muestras en su sitio web. Él tiene una cuenta Premium.

Me gustaría hacer que esto sea lo más fácil posible para él (no es un geek). Básicamente, me gustaría dejar que copie y pegue la URL de la canción desde la barra de direcciones del navegador y hacer que mi aplicación haga el resto por él.

Eso es relativamente fácil de hacer en realidad, y lo hice funcionar con éxito con la versión estándar del reproductor. Pero no puedo encontrar una forma funcional de incorporar programáticamente la versión minúscula del reproductor. No se menciona al pequeño reproductor en la referencia SoundFound oEmbed, y solo configurar el parámetro maxheight en 18 no lo hace por mí.

El problema es que necesito generar la inserción en cada página, porque la misma canción incrustada en la página de inicio debe representarse usando el pequeño reproductor, mientras que en una subpágina debe ser el reproductor estándar completo, por lo tanto, no puedo simplemente Permitirle copiar y pegar el código de inserción de SoundCloud en mi aplicación, porque entonces tendría un pequeño código de inserción para el reproductor o un código de reproductor estándar disponible, no los dos. Copiar y pegar dos códigos de inserción diferentes para la misma canción parece demasiado problemático para una cosa tan simple.

Otra cosa es que no puedo probar esto correctamente, ya que no tengo una cuenta Premium y no tengo acceso a su cuenta ... sería genial si hubiera una forma de que los desarrolladores se "burlen" de una cuenta Premium para fines de desarrollo ...

¡Gracias por cualquier y toda la ayuda!

Dan

Answer 1

Desafortunadamente, /oembed solo funciona para widget regular (HTML5 de flash) en este momento.

Sin embargo, puedes construir el html para cualquiera de ellos tú mismo. Aquí hay una plantilla para insertar pequeños widgets:

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

Y la plantilla para el widget regular:

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

Debe ponerlos en cadenas (sin saltos de línea) y realizar una interpolación variable en estas cadenas. No estoy seguro de qué idioma está utilizando, pero la mayoría de los idiomas lo tienen incorporado.

Para JavaScript, que estoy escribiendo la mayor parte del tiempo, podría usar la función supplant Douglas Crockford.

Las variables son trackId cuyo valor debe ser entero positivo y widgetParams , cuyo valor debe ser algo así como &color=ff6600&auto_play=false , es decir pares de key=value con el prefijo & . He usado { y } como delimitadores para que las variables se interpongan en mi ejemplo, pero podría, por supuesto, ser lo que tu lenguaje o motor de plantillas lo requiera.

Para que su cliente pueda solo darle una URL de seguimiento, deberá hacer una solicitud de API para /resolve punto final para recuperar la ID de la pista de la URL de la pista (enlace permanente). Debería registrarse como desarrollador para tener client_id para autorizar solicitudes a la API. Describí cómo hacerlo en JavaScript en otra respuesta aquí .

Si prefieres no hacer solicitudes a la API, también puedes pedirle a tu cliente que te proporcione el código de inserción que pueden recuperar fácilmente de cualquier sonido o establecer en SoundCloud presionando el botón "compartir", y luego extraer el sonido o establecerlo ID usando la expresión regular.

Aquí hay un ejemplo de cómo funcionaría esto para insertar un pequeño widget (también usando SoundCloud JS SDK) http://jsbin.com/OLUloX/1/edit