es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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!

Este Cheatsheet enumera cada etiqueta que puede poner en 
<head>  Elemento

Este Cheatsheet enumera cada etiqueta que puede poner en Elemento

Cada página web tiene un encabezado de documento y hay mucho que va allí. Los usuarios de WordPress a menudo confían en los complementos de SEO para manejar las metaetiquetas complejas .Sin embargo, si está codificando un tema desde cero, es posible que desee expandir un poco el encabezado del documento . Ha

(Consejos de tecnología y diseño)

20 libros de diseño para bosquejar, tipografía y obtener nuevas ideas

20 libros de diseño para bosquejar, tipografía y obtener nuevas ideas

Contrario a la creencia popular, la habilidad de dibujar bien no es solo reservada para aquellos que son bendecidos con talento natural. Mientras que algunos pueden captar la esencia de dibujar más rápido que otros, la verdad del asunto es que cualquiera puede aprender a dibujar bien, siempre y cuando tenga los recursos adecuados.E

(Consejos de tecnología y diseño)