Cómo personalizar el reproductor de audio de SoundCloud

La transmisión de audio ha existido en Internet desde 1990 y no hay numerosas plataformas de transmisión de audio populares para elegir ahora. Una de las más populares es SoundCloud, que tiene algunas ventajas distintivas sobre sus competidores, incluida la facilidad de incrustación.

Mientras que el reproductor integrado es muy fácil de usar y receptivo, puede ponerlo en la barra lateral, en una publicación o en una página de inicio, puede limitarse a personalizar el reproductor. Solo puede cambiar el color y el tamaño antes de compartirlo o incrustarlo. Si desea colocar el reproductor en su página web con un diseño completamente nuevo, entonces puede que le guste ToneDen.

ToneDen es una compilación de biblioteca javascript para personalizar el reproductor de audio SoundCloud. El reproductor es sensible, personalizable y extensible. Puede cambiar la apariencia, habilitar el evento de teclado o elegir mostrar el reproductor con una sola pista o con lista de reproducción completa. En este post, te guiaré a la instalación y optimización básicas. ¡Empecemos!

Lectura Recomendada: Cómo Crear Un Reproductor De Audio Web Elegante

1. Instalación del reproductor

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

Por ejemplo, quiero agregar a mi sitio a una de mis usuarias favoritas de SoundCloud, Regina Spektor. Lo primero que voy a hacer es crear un div con id único, por ejemplo player, así.

<div></div>

a Continuación, agregue el siguiente javascript necesario antes de la etiqueta de cierre body:

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

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

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

2. Personalización del reproductor

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

El siguiente fragmento es una demostración del uso de API simples como skin para cambiar el color del reproductor, singlepara cambiar la interfaz de usuario parece ser minimalista y visualizerType para mostrar un tipo diferente de visualización.

Nuestro jugador ahora debería tener este aspecto:

Si usted quiere tener varios jugadores en la página, crear fácilmente algunos más ToneDen.player.create como:

Pensamiento final

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.