Cómo integrar un reproductor de audio HTML5

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

Speakker-reproductor-audio

Si eres de los que utilizan reproductores de audio en tu página, seguro que estás interesado en integrar un reproductor algo más moderno y sobre todo, dejar de utilizar la pesada tecnología Flash. Speakker nos presentan un reproductor de audio HTML5 con una gran compatibilidad entre los distintos navegadores. Además este reproductor detecta el navegador desde donde acceden nuestros usuarios para mostrar siempre un reproductor accesible.

Por el momento está disponible un modelo amplio, al que no le faltan los botones de reproducción, volúmen y modo contínuo de pistas, incluso integración con Last.fm y botones para compartir en redes sociales. En la parte inferior también incluye un enlace para descargar las canciones de forma comprimida. Se espera también un modelo “nano” mucho más comprimido pero con las mismas funciones.

Estos son los pasos para integrar el reproductor de audio HTML5 en tu web:

  • Descargar los ficheros necesarios desde speakker.zip
  • Descomprimir y subir la anterior carpeta a tu servidor.
  • Incluye la llamada a los ficheros “projekktor.min.js” y “speakker.min.js” en tu página
  • Incluye también la llamada a los hojas de estilo “speakker.css” y “mspeakker.css”
<script type="text/javascript" src="speakker/jquery.min.js"></script>

<link rel="stylesheet" href="speakker/css/speakker.css" 
type="text/css" media="screen">
<link rel="stylesheet" href="speakker/css/mspeakker.css" 
type="text/css" media="screen">
<script type="text/javascript" src="speakker/projekktor.min.js"></script>
<script type="text/javascript" src="speakker/speakker.min.js"></script>
  • Crear un espacio para insertar el reproductor.
<div class="speakkerSmall"></div>
  • Personaliza los parametros del reproductor.
<script type="text/javascript">
$(document).ready(function() {
$().speakker({
file: 'http://www.speakker.com/opentape/code/projekktor.php',
playlist: true,
theme: 'light',
admin: 'http://www.speakker.com/opentape/code/login.php',
lastfm: 'http://www.lastfm.de/music/paniq'
});
});
</script>

 

Un comentario

  1. Julio dijo:
    22 mayo, 2014
    Responder

    Se ve una buena idea, pero los archivos projekktor.min.js, speakker.min.js y los de estilos dónde están?
    Porque en el ZIP no están.

    Saludos

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.