Poner un Reproductor de Música en tu Página Web

29.07.2013 16:59

Agregar musica de fondo en mi sitio web o blog

Hola queridos lectores, como muchos saben hace un tiempo fue cerrado un maravilloso sitio con el cual podríamos crear un widget estilo playlist (reproductor) de música (con resultados de YouTube) e insertarlo en nuestra página web fácilmente mediante un código HTML. Si, me refiero a MIXPOD :c. Bueno pues como fue uno de los sitios mas famosos en donde podíamos hacer todo esto, mucha gente creyó que buscar una alternativa similar iba a ser algo complicado. Y en efecto, mucha gente que esta leyendo esto estaría probablemente buscando una solución al problema. Claro que existen algunos sitios de Música como "SoundCloud", "HulkShare", o "Goear" que permiten insertar su reproductor en nuestros sitios web para que nuestros visitantes puedan escuchar las canciones sin tener que estar en esos dichosos sitios de música. Pero bueno, hay mucha diferencia entre esos sitios (en los cuales solo encontraremos musica de los usuarios (artistas independiente) y tener un reproductor (con estilo personalizado) y con resultados del GIGANTE "YouTube".

Hoy viajando por la red en busca de una solución me tope con una excelente aplicación web muy parecida a MIXPOD, la cual nos permite hacer todo lo que este antes de que cerrara, se llama "PodSnack" y una gran ventaja que tiene, es que sus reproductores están implementados en HTML5 y no en "FLASH", lo cual es un punto a favor, 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, claro que si quieres subir tus propios archivos de Audio podrás contratar un plan premium. Te recuerdo que sin dicho plan (estando en la versión gratuitael reproductor 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 un reproductor en nuestra página web creado con PodSnack.

Para empezar tenemos que ingresar a su sitio web: PodSnack.com

Luego haremos clic en "Build a PlayList" para entrar a la aplicación

Para poder entrar tendremos que registrarnos en el sitio via e-mail o bien, podemos ingresar con nuestra cuenta de Facebook, Twitter o Google para ahorrarnos un poco de tiempo.

Bien, una vez que hayamos entrado nos mandara a una página en donde le pondremos un titulo a nuestro "Playlist" y elegiremos en donde queremos buscar las canciones (preferiblemente en YouTube)

Si escoges YouTube tendrás que buscar las canciones manualmente en el buscador y después añadirlas al "playlist".

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 reproductor no sale cuando intentas buscarlo, simplemente copia su URL, pégala en el buscador y aparecerá como único resultado ;).

Una vez que hayamos terminado de añadir las canciones (recuerda que sin los puntos suficientes son 5 como máximo) vamos con el siguiente paso, en el cual vamos a elegir el diseño (plantilla) de nuestro reproductor para después personalizarlo con nuestros colores favoritos :).

En mi caso yo elegí la plantilla "Top 10 Player" que en mi parecer tiene un buen aspecto:

Mas abajo podremos modificar los colores de la plantilla a nuestro gusto.

En las opciones de la izquierda podremos modificar algunos puntos como: el tamaño del reproductor, 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 terminemos de editar y configurar nuestro reproductor nos iremos al ultimo paso, para eso haremos clic 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).  Y en la ventana que se abre elegimos la opción "Use Free (With Watermark)" si queremos usar el reproductor de manera gratuita (solo 5 canciones), o "next" si deseamos comprar puntos (precios asequibles) para poder añadir mas canciones al reproductor 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 reproductor 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 (playlist) insertado:

 

Bueno amigos, eso fue todo, espero que les haya gusto y servido de algo, no se olviden de compartirlo en sus redes sociales favoritas y hasta luego :). Post by Arturo.

 

HTML Comment Box is loading comments...