Diseña y publica tus sitios rápidamente

Agrega música a tu sitio con la nueva app de SoundCloud

En este artículo te enseñaremos a usar la nueva app de SoundCloud para que puedas agregar música a tu sitio. Con ella podrás integrar y escuchar listas de reproducción de SoundCloud en tu sitio Breezi. Tenemos un tutorial sobre cómo agregar SoundCloud con la app de Embed HTML pero, con esta nueva app, no necesitarás usar ningún código. ¡Solamente necesitas el URL de la lista de reproducción que quieras agregar a tu sitio!

Para empezar…

No es necesario que tengas una cuenta de SoundCloud, aunque es gratis crear una, porque puedes agregar “Sets” o listas de reproducción de otros usuarios (siempre y cuando sea de dominio público). Sin embargo, si quieres hacer una lista de reproducción tu mismo, necesitarás crear una cuenta (aún cuando no es indispensable que tengas tu sesión iniciada para copiar el URL del set que quieres usar).

Para iniciar la sesión de SoundCloud

Para iniciar la sesión de SoundCloud

Dirígete a tu página (o a la página del usuario cuyo set quieres compartir). Ahí, busca donde dice “Sets”.  Escoge y haz clic en el set que quieras.

"Sets" en SoundCloud

Selecciona un set que quieras compartir a tu sitio Breezi

Después de eso, todo lo que tienes que hacer es copiar el URL del set que quieras agregar a tu sitio.

URL de un set de SoundCloud

Copia el URL del set

Para instalar la app

Para instalar la app de SoundCloud, haz clic en “Apps” de la barra inferior. Se abrirá un menú en el que tendrás que buscar la opción de “SoundCloud Set Player”. Arrastra el botón de “Install New” hasta tu layout. Ahí se cargará la versión predeterminada de la app. Toma en cuenta que la app cambiará su tamaño para ocupar el espacio de su contenedor en su totalidad.

"SoundCloud Set Player" en el menú de "Apps"

"SoundCloud Set Player" en el menú de "Apps"

La configuración de la app de SoundCloud

Puedes cambiar el estilo, personalizar y editar los botones, transiciones, etc. Además, aquí es donde podrás pegar el URL del set para que se cargue en tu sitio Breezi. Para editar su configuración, haz clic en el ícono de la herramienta en la barra de la app. Recuerda que debes hacer clic en el botón de “Save” cada vez que termines de editar la configuración de la app para que se guarden los cambios.

"Edit Settings" en la barra de herramientas de la app

"Edit Settings" en la barra de herramientas de la app

Se abrirá un nuevo panel donde podrás cambiar la configuración de la app.

General Settings (configuración general)

Las opciones de "General Settings" en la app de SoundCloud

Las opciones de "General Settings" en la app de SoundCloud

- SoundCloud Track Set: Esta es la primera opción y es aquí donde tienes que pegar el URL del set para que se cargue. Solamente borra el URL predeterminado y pega el del set que quieras agregar.

- Autoplay: Al seleccionar esta opción, el set se reproducirá automáticamente cuando un usuario visite la página donde está instalada la app.

Display Settings (configuraciones de visualización)

 Las opciones de "Display Settings" en la app de SoundCloud

Las opciones de "Display Settings" en la app de SoundCloud

- Show Artwork: Aquí puedes elegir si quieres mostrar el arte o portada de las canciones en tu set (si es que tienen). Te recomendamos que deshabilites esta opción si tus canciones no tienen arte.

- Song Details Position: Puedes editar dónde quieres que aparezcan los detalles de la canción. Puedes posicionarlos: Over artwork (sobre el arte), Above playback controls (sobre los controles) and Below playback controls (debajo de los controles).

- Show Tracklist: Al habilitar esta opción podrás mostrar la lista de canciones del set. Si decides no marcar la casilla, la lista no aparecerá.

FX & Style Settings (configuración de efectos y estilo)

Las opciones de "Fx & Style Settings" en la app de SoundCloud

Las opciones de "Fx & Style Settings" en la app de SoundCloud

- Artwork Transition: En caso de que hayas escogido mostrar el arte de las canciones, puedes editar el tipo de transición que tendrán de una canción a otra: Fade (difuminar), Slide (deslizar) o None (ningún efecto).

- FX Speed: Puedes decidir la velocidad de la transición: Slow (lenta), Medium (media) o Fast (rápida).

- Controls Style: Aquí puedes cambiar la figura de los controles: Circles (círculos), Squares (cuadrados), Rectangles (rectángulos), Pills (pastilla), Rectangle set (serie de rectángulos) o Pill set (serie de pastillas).

- Buttons Style: Con esta opción puedes controlar la “intensidad” del color de los botones. Pueden ser light (claro), dark (oscuro), minimal light (claro minimalista) or minimal dark (oscuro minimalista).

- Buttons Tint Color: Con esto puedes elegir el color para los botones del reproductor.

- Playtime Tooltip: Esto se refiere al letrero que aparece cuando pasas el cursor sobre la barra de progreso. Te enseña cuánto has avanzado en la canción y cuánto tiempo falta para que termine. Puedes decidir si quieres que aparezca con un color más oscuro (darker), claro (lighter) o sin color (none). 

- Tracklist Row Rollover: Puedes cambiar el color que aparece cuando pasas el cursor sobre una de las pistas del set: darker (oscuro), lighter (claro) o sin color (none).

- Rollover Opacity: Ajusta la opacidad del color que aparece cuando pasas el cursor sobre una canción.

- Show Dividers: Al marcar esta casilla, se verán divisores entre las canciones en la lista.

- Divider Color: Si marcaste la casilla sobre los divisores, puedes personalizar su color a blanco (white) o negro (black).

- Divider Opacity: Con esta opción podrás definir la opacidad de los divisores.

Propagate Style to All Pages (propagación del estilo)

La opción de "Propagate Style To All Pages" en la app de SoundCloud

La opción de "Propagate Style To All Pages" en la app de SoundCloud

Al habilitar esta opción, todas las versiones de esa app tendrán los mismos estilos a lo largo de todo tu sitio Breezi. Más aún, si actulizas una de estas apps en una página, los cambios se verán reflejados en todas las páginas donde esa app esté instalada.

Si deshabilitas la opción de “Propagate Style to All Pages”, los estilos se manejarán de forma independiente en esa app. Toma en cuenta que esta opción esta habilitada de forma predeterminada.

Para dar formato a los textos

Si quieres cambiar el color, tamaño, alineación, etc. de los títulos de las pistas o de los detalles de las canciones (si es que habilitaste esta opción), puedes lograrlo al hacer clic en el dot de estilo.

Los títulos de las listas

Cuando hagas clic en su dot de estilo, se abrirá una barra de herramientas donde podrás dar formato al texto.

Dot de estilo para los títulos de las pistas

Dot de estilo para los títulos de las pistas

Los detalles de la canción

Como podrás ver, estos textos muestran el título de la canción que está en reproducción y el usuario de SoundCloud cuyo set estás escuchando. Estos son vínculos. El primero te lleva a la página de SoundCloud de la canción y el segundo abre el perfil del usuario. Puedes editar cada uno de estos vínculos individualmente: haz clic en el dot de estilo de cada uno. Como con cualquier otro vínculo, puedes elegir un color predeterminado y otro para cuando el cursor pasa sobre él.

Dot de estilo para los detalles de esa canción

Dot de estilo para los detalles de esa canción

¡Eso es todo! Ahora puedes disfrutar de listas de reproducción y escuchar canciones, discursos, conferencias o cualquier otra pista de audio que quieras agregar a tu sitio.

¿Te pareció útil esta publicación? Haznos saber en la sección de comentarios.