Todo lo que tu página web necesita

Crea y pon un reproductor de música en tu web – HTML

Inser música en blog o web

Hola ¿Que tal todo?, esta vez te mostrare como crear facilmente un reproductor de música HTML para incorporarlo en tu página web y asi puedas tener algo de música adecuadamente en esta.

Hace un tiempo fue cerrado un maravilloso sitio con el cual se podia crear un widget estilo playlist (reproductor) de canciones (con resultados de YouTube) e insertarlo en una web mediante un solo código HTML.

Si, me refiero a MIXPOD :c. Bueno pues como fue un sitio que parecia de esitlo unico, mucha gente creyó que encontrar una alternativa similar iba a ser algo complicado.

Pues no, te mostrare dos herramientas que he hayallado para crear hermosos reproductores de música HTML5.

¿Pero dicen que poner música en un sitio web esta mal?

Depende de como se inserta y del sitio, porque la música es practicamente una de las necesidades del ser humano, un poco de esta en culquier parte es lo mejor y muchos no lo entienden.

La solución es poner todo a elección del usuario o visitante, es decir, que se reproduzca solo si el usuario quiere, y que tambien este elija la canción y el nivel de volumen.

¿Entonces si funciona y ayuda?

He visto como algunas de las herramentas mas usadas y poderosas en cuanto a trabajo de “experiencia de usuario” confirman esto, colocando un distrsctor como música, un juego o una frase en varios procesos de su web.

Widgets de reproductor musical para tu web

  • PodSnack

Hoy viajando por la red me tope con una excelente aplicación web muy parecida a MIXPOD, la cual permite hacer todo lo que esta antes de que cerrara, se llama “PodSnack”.

Una gran ventaja que tiene, es que sus reproductores están implementados en HTML5 y no en “FLASH”, a demás de que no solo acepta resultados de YouTube si no que también podremos usar archivos de Audio que tengamos en nuestra cuenta de DropBox.

Con su versión gratuita el player admite un máximo de 5 tracks, los cuales deben tener una duración de 5 minutos o menos.

Bueno, sin mas palabras a continuación les muestro un pequeño tutorial sobre como crear e insertar este plugin en nuestra página web creado con PodSnack.

Procedimiento:

Lo primero es ir a PodSnack.com para hacer clic en “Build a PlayList”.

Como usar PodSnack

Despues hay que registrarse en el sitio via e-mail, tambien puedes ingresar con una cuenta de Facebook, Twitter o Google para ahorrar un poco de tiempo.

PodSnack en acción

Luego llega el momento de ponerle un titulo a tu “Playlist” y elegir en donde se buscaran las canciones.

Si escoges YouTube tendrás que buscar las canciones manualmente y después añadirlas al “playlist”.

Añadir las canciones

OJO: He notado que algunos resultados no aparecen fácilmente en este buscador, por lo que si el video que quieres añadir a tu lista no sale cuando intentas buscarlo, simplemente copia su URL, pégala en el buscador y aparecerá como único resultado ;).

Una vez terminado el playlist, toca elegir el diseño (plantilla) del reproductor para después personalizarlo con tus colores favoritos :).

En mi caso yo elegí la plantilla “Top 10 Player” que en mi parecer tiene un buen aspecto.

En las opciones de la izquierda se pueden modificar algunos puntos como: el tamaño del widget, las opciones del “playback” (auto-reproducir, loop, etc), el track que sonara primero que todos los demás, el volumen, los botones de compartir, entre otras cosas.

Una vez que terminas de editar y configurar el player tan solo hay que hacer click en el botón de abajo: “Finish”

En este ultimo paso lo que haremos sera copiar el código del “playlist” para insertarlo en nuestra página web. Para eso haremos clic en “Embed” (for HTML).

En la ventana que se abre elegimos la opción “Use Free (With Watermark)” si queremos usar el reproductor de manera gratuita, o “next” si deseamos comprar puntos (precios asequibles) para poder añadir mas canciones y con mas duración :).

Si escoges el uso gratuito inmediatamente te aparecerá el código HTML que deberas copiar y pegar en tu página para insertar el plugin creado (si no sabes como insertar un código HTML en tu web aqui esta un tutorial que explica como hacerlo en las plataformas mas famosas).

Ejemplo de un reproductor HTML insertado:

  • SCM Music Player

Esta herramienta proporciona un reproductor de música bastante util en formato de barra, la verdad es que lo pongo ya que puede llegar a funionar mejor que un player in-line.

Es muy configurable y la ventaja en comparación con PodSnack es que no presenta ningun anuncio, pero el contra seria que los temas no se pueden añadir facilmente de YouTube.

Hay que conseguir la URL fuente de cada audio para poder crear el playlist.

Procedimiento:

Para empezar hay que ingresar a: https://scmplayer.co/

El primer paso de la configuración es elegir un diseño de entre los 4000 que tiene este player.

Despues toca armar la lista de canciones y finalmente checar las opciones de comportamiento.

Lo ultimo es copiar el código HTML que se te proporciona y ponerlo en tu web.

Bueno eso fue todo, espero que esto te haya gusto y servido de algo, no se olviden de compartirlo en sus redes sociales favoritas y hasta luego 🙂