Reproductor de música en HTML5

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Cada día aparecen nuevos recursos en HTML5, esta vez codebasehero.com nos presenta un reproductor de música para insertar directamente en webs / blogs realizado en HTML5 y jQuery. Para ver y comprender su funcionamiento puedes probar su demostración online desde HTML5 jQuery Music Player.

La principal ventaja para cambiar tu reproductor Adobe Flash por este (o cualquier otro) en HTML5, son los estándares, ya que HTML5 jQuery Music Player funciona en cualquier navegador actual (incluyendo navegadores de teléfonos móviles, smarthphone) sin necesidad de instalar añadidos como el programa Adobe Flash Player. La agilidad para reproducir las canciones, los controles de reproducción y el bajo consumo de CPU respecto a reproductores Flash hacen de la tecnología HTML5 el principal sustituo de los antiguos reproductores de música insertados en webs.

Respecto al funcionamiento de HTML5 jQuery Music Player podemos decir que cuenta con varias opciones de configuración interesantes como: poder crear una lista completa de canciones, con todos los datos relacionados como: título de la canción, artista, descripción, puntuación, precio, ruta de compra, duración y cover del álbum.

Instalar reproductor de música en HTML5 en nuestro site:

  1. Subir a nuestro FTP todos los archivos.
  2. Incluir los archivos: jQuery, jPlayer y plugin javascript, css en nuestra página.
  3. Construir nuestra playlist de canciones con el siguiente formato:
  4. {
    mp3:’mix/1.mp3′,
    oga:’mix/1.ogg’,
    rating:4.5,
    title:’Some song title’,
    buy:’http://www.codebasehero.com’,
    price:’0.99′,
    duration:’4:28′,
    artist:’Artist Name’,
    cover:’images/cover.jpg’
    }

  5. Personalizar e iniciar el plugin:
  6. {
    currencySymbol:’$’,
    buyText:’BUY’,
    tracksToShow:5,
    autoPlay:false,
    ratingCallback:function(index, playlistItem, rating){
    //some logic to process the rating, perhaps through an ajax call
    },
    jPlayer:{} //override default jPlayer options here. This accepts the same structure as the standalone jPlayer
    };

Un comentario

  1. Napster dijo:
    9 Mayo, 2013
    Responder

    Como hago para que la reproducción sea automática?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.