Personaliza el reproductor de audio SoundCloud con ToneDen SDK

La transmisión de audio ha existido en Internet desde 1990 y no hay muchas plataformas populares de transmisión de audio para elegir a partir de ahora. Uno de los más populares es SoundCloud, que tiene algunas ventajas claras sobre sus competidores, incluida la facilidad de inserción.

Si bien el reproductor insertado es muy fácil de usar y receptivo, puedes ponerlo en la barra lateral, en una publicación o en una página principal, puedes limitarlo a la hora de personalizar el reproductor. Solo puede cambiar el color y el tamaño antes de compartirlo o incrustarlo. Si desea poner al jugador en su página web con un diseño completamente nuevo, es posible que le guste ToneDen.

ToneDen es una compilación de biblioteca de JavaScript para personalizar el reproductor de audio SoundCloud. El jugador es receptivo, personalizable y extensible. Puede cambiar el aspecto, activar el evento del teclado o elegir mostrar el reproductor con una única pista o llena con la lista de reproducción. En esta publicación, lo guiaré a la instalación y optimización básicas. ¡Empecemos!

Instalación del reproductor

Para obtener SoundCloud Player personalizado, no necesita ningún script incrustado desde el sitio de SoundCloud. Todo lo que tiene que hacer es simplemente definir un elemento con un ID único y luego agregar el script requerido.

Por ejemplo, quiero agregar uno de mis usuarios favoritos de SoundCloud, Regina Spektor, a mi sitio. Lo primero que voy a hacer es crear un div con una identificación única, digamos player, como tal.

Luego agrego el siguiente javascript requerido antes de la etiqueta de cierre del body :

La primera función es básicamente llamar a la biblioteca de JavaScript de ToneDen. Simplemente deje todo tal como está, y si desea alojar la fuente en su propio servidor, consígalo aquí.

En la segunda función, aquí es donde debe hacer referencia a todos los recursos. Para mostrar el reproductor, dale a la dom la misma identificación que definimos antes. Y para llamar a la fuente de audio, solo necesito agregar las urls con la urls del usuario que quiero. Si solo necesita pistas de audio seleccionadas, incluya las URL de audio de la siguiente manera:

 URL: ['https://soundcloud.com/reginaspektor/samson', 'https://soundcloud.com/reginaspektor/us', 'https://soundcloud.com/reginaspektor/alltherowboats', ] 

¡Eso es! Ahora tengo mi hermoso reproductor de SoundCloud:

Personalizar el reproductor

Como se mencionó, puede personalizar el reproductor ToneDen si no le gusta la opción predeterminada. Para personalizarlo, solo incluya la API relacionada en la segunda función. Dirígete a la página de documentación de API para obtener más detalles.

El siguiente fragmento es una demostración de usar una apariencia similar a la API simple para cambiar el color del reproductor, single para cambiar la interfaz de usuario parece ser minimalista y visualizerType para mostrar un tipo diferente de visualización.

 ToneDenReady = window.ToneDenReady || []; ToneDenReady.push (function () {// Aquí es donde ocurre toda la acción: ToneDen.player.create ({dom: '#player', urls: ['https://soundcloud.com/reginaspektor/samson', ' https://soundcloud.com/reginaspektor/us ', ' https://soundcloud.com/reginaspektor/alltherowboats ', ], single: true, skin:' dark ', visualizerType:' bars '});}); 

Nuestro jugador ahora debería verse así:

Si quieres tener varios jugadores en la página, crea fácilmente más ToneDen.player.create así:

 ToneDenReady.push (function () {ToneDen.player.create ({dom: '# player1', urls: ['https://soundcloud.com/giraffage']}); ToneDen.player.create ({dom: ' # player2 ', urls: [' https://soundcloud.com/teendaze ']}); ToneDen.player.create ({dom:' # player3 ', urls: [' https://soundcloud.com/beat- cultura' ] }); }); 

Pensamiento final

Con solo un código adicional, ahora puedes crear tu propia versión del reproductor SoundCloud. Lo que más me gusta de esta biblioteca es su diseño minimalista y fácil personalización. También puede integrar este reproductor a su blog de WordPress con un sencillo tutorial en la parte inferior de la página ToneDen. ¡Que te diviertas!

Cree sitios web receptivos más rápidamente con la interfaz de usuario semántica

Los frameworks frontend como Bootstrap todavía están de moda. Hay docenas de excelentes opciones para elegir, pero una de las que recientemente me llamó la atención es la UI semántica .De acuerdo, esta biblioteca ha existido por un tiempo, data de hace unos años. Sin embargo, la versión más reciente de la versión 2.2 viene

(Consejos de tecnología y diseño)

Ratones informáticos inusuales que probablemente no has visto antes

Un mouse es innegablemente una de las herramientas esenciales porque mientras lee esto, está haciendo clic y desplazándose hacia arriba y hacia abajo. Si usa una computadora (¡duh!), Es probable que dependa mucho de un mouse; esto es 100% cierto hace 20 años, tal vez el 80% es verdad hace 5 años y ciertamente menos del 50% cierto en estos días. La r

(Consejos de tecnología y diseño)