Cómo crear un reproductor de audio

En este artículo, vamos a crear un player web de audio. Si está ejecutando un sitio web para podcasting y desea crear un reproductor multimedia que se adapte a su diseño web general, esta publicación probablemente sea para usted.

Haga clic en el botón Demo para ver cómo se verá el reproductor de audio.

Lo que necesitamos

Antes de crear el reproductor de audio, necesitamos preparar algunos elementos clave para él: jPlayer , jQuery y un conjunto de iconos de fuentes llamado FontAwesome .

En primer lugar, descarguemos jPlayer . JPlayer es un complemento de jQuery que nos permite ejecutar rich media en nuestra página web sin problemas. Siempre que pueda usar HTML y CSS, estará listo para comenzar.

jPlayer es esencialmente un complemento de jQuery, por lo que también necesitamos descargar jQuery para que funcione, y en el momento de escribir este artículo, jQuery se encuentra actualmente en la versión 1.8.2. También necesitamos algunos íconos para la GUI del reproductor multimedia, y esta vez usaremos FontAwesome para entregar los íconos .

Después de eso, extraemos todos los archivos descargados y colocamos todas las cosas, incluidos los archivos jPlayer, jQuery y las fuentes en una carpeta apropiada. Luego, vincule jquery.js y jquery.jplayer.min.js al documento html, de la siguiente manera.

 <link rel = "stylesheet" href = "css / normalize.css"> <link type = "text / css" href = "css / style.css" rel = "stylesheet" /> <script type = "text / javascript" src = "js / jquery.js"> </script> <script type = "text / javascript" src = "js / jquery.jplayer.min.js"> </script>

Como puede ver, además de la biblioteca jQuery y jPlayer, también hemos vinculado dos archivos CSS allí. El primero normalize.css restablecerá o normalizará los estilos del navegador, por lo que nuestra página web se representará de manera más consistente en todos los navegadores, mientras que el segundo, style.css es donde colocamos nuestros estilos principales.

El audio

Para la demostración en este tutorial, usaremos el audio de Kelli Anderson de su presentación en TEDx Pheonix. Bueno, en realidad es un video, pero puede extraer el audio solo a través de una de las siguientes herramientas, Easy Youtube Downloader (Extensión FF) o KeepVid.com .

Estructurar el marcado HTML

Ahora es el momento de estructurar el marcado HTML para el reproductor de audio y, a continuación, encontrará el marcado HTML que necesitamos. Lo importante de este marcado es el id=jquery_jplayer_1 que se asigna en el div que contiene todos estos. Esta identificación se usa para vincular esta estructura a jPlayer más adelante a través de la función jQuery.

Además, todas las clases asignadas en la siguiente estructura, incluidas jp-play , jp-pause , jp-mute y jp-unmute son todas las clases estándar utilizadas en jPlayer. Le sugiero que no cambie estas clases, así como el atributo id para facilitar las cosas cuando más adelante diseñemos el reproductor de audio (a menos que realmente sepa lo que está haciendo).

 <div id = "jquery_jplayer_1" class = "jp-jplayer"> </div> <div id = "jp_container_1" class = "jp-audio"> <div class = "jp-type-single"> <div class = "jp-title"> <ul> <li> TEDxPhoenix - Kelli Anderson - Maravilla disruptiva para un cambio </li> </ul> </div> <div class = "jp-gui jp-interface"> <ul class = "jp-controls"> <li> <a href = "javascript :;" class = "jp-play" tabindex = "1"> & # 61515; </a> </li> <li> <a href = "javascript :;" class = "jp-pause" tabindex = "1"> & # 61516; </a> </li> <li> <a href = "javascript :;" class = "jp-mute" tabindex = "1" title = "mute"> & # 61480; </a> </li> <li> <a href = "javascript :;" class = "jp-unmute" tabindex = "1" title = "unmute"> & # 61478; </a> </li> </ul> <div class = "jp-progress"> <div class = "jp-seek-bar"> <div class = "jp-play-bar"> </div> </div> </div> <div class = "jp-time-holder"> <div class = "jp-current-time"> </div> </div> <div class = "jp-volume-bar"> <div class = "jp-volume-bar-value"> </div> </div> <div class = "jp-sin-solution"> <span> Actualización requerida </span> Para reproducir los medios, deberá actualizar su navegador a una versión reciente o actualizar su <a href="http://get.adobe.com/flashplayer/" target="_blank"> complemento Flash </a>. </div> </div> </div>

Si observa más de cerca esta estructura HTML, encontrará los siguientes caracteres &#61515; , &#61516; , &#61480; y &#61478; . Estos caracteres son números HTML especiales para hacer referencia y representar los caracteres de iconos que provienen de FontAwesome.

Activación del reproductor de audio

A continuación, una vez que se ha aclarado el marcado HTML, simplemente necesitamos activar el reproductor con el siguiente script. En este script proporcionamos las fuentes de audio y, como puede ver a continuación, hemos agregado dos fuentes, mp3 y oga . El oga ampliará la compatibilidad entre navegadores, especialmente en Firefox y Opera.

 $ (documento) .ready (function () { $ ("# jquery_jplayer_1"). jPlayer ({ listo: función () { $ (esto) .jPlayer ("setMedia", { mp3: "audio / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3", oga: "audio / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg" }); }, swfPath: "/ js", suministrado: "mp3, oga" }); });

Después de agregar este script, el audio ya se puede reproducir y si inspeccionamos el marcado HTML usando Firebug u otras herramientas de desarrollo, podemos encontrar un nuevo elemento <audio> HTML5 también generado.

firebug-audio-html5

Diseñando el player

En esta sección comenzaremos a agregar estilos para que el reproductor de audio se vea mejor, y comenzaremos definiendo la nueva familia de fuentes y eliminando el subrayado del elemento de anclaje, así.

 @Perfil delantero { familia de fuentes: "FontAwesome"; src: url ("fuentes / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") formato ("eot"), url ("fonts / fontawesome-webfont.woff") formato ("woff"), url ("fonts / fontawesome-webfont.ttf") formato ("truetype"), url ("fonts / fontawesome-webfont.svg # FontAwesome") formato ("svg"); peso de fuente: 400; estilo de fuente: normal; } a { decoración de texto: ninguna; } .jp-jplayer, .jp-audio { ancho: 420px; margen: 50px automático; }
Título de audio

No cambiaremos mucho el estilo de esta sección, ya que solo contiene el título de texto del audio que se está reproduciendo. Solo reduciremos el texto del título y lo volveremos gris.

 .jp-title { tamaño de fuente: 12px; alineación de texto: centro; color: # 999; } .jp-title ul { acolchado: 0; margen: 0; estilo de lista: ninguno; }
Contenedor GUI

La GUI del reproductor de audio está contenida dentro de un div asignado con la clase jp-gui Puede ver en la captura de pantalla anterior cómo se verá nuestro reproductor multimedia. Aplicamos colores degradados para el tema de la GUI y usamos este número de color para el color inicial #f34927 y #dd3311 para el color final. Además, asegúrese de que la propiedad de position div esté definida como relative .

 .jp-gui { posición: relativa; fondo: # f34927; fondo: -moz-linear-gradient (arriba, # f34927 0%, # dd3311 100%); fondo: -webkit-gradient (lineal, arriba a la izquierda, abajo a la izquierda, color-stop (0%, # f34927), color-stop (100%, # dd3311)); fondo: -webkit-linear-gradient (arriba, # f34927 0%, # dd3311 100%); fondo: -o-linear-gradient (arriba, # f34927 0%, # dd3311 100%); fondo: -ms-linear-gradient (arriba, # f34927 0%, # dd3311 100%); fondo: degradado lineal (hacia abajo, # f34927 0%, # dd3311 100%); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# f34927', endColorstr = '# dd3311', GradientType = 0); -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1); caja de sombra: 0px 1px 1px 0px rgba (0, 0, 0, .1); radio del borde: 3px; desbordamiento: oculto; margen superior: 10px; }
Control de GUI

La sección de control de la GUI contiene la interfaz de usuario que controla el audio, como el botón de reproducción y pausa, el botón de volumen y silencio. en esta sección, establecemos la propiedad font-family en FontAwesome , y cambiamos el color del texto a blanco y agregamos la sombra del texto.

 .jp-controls { acolchado: 0; margen: 0; estilo de lista: ninguno; familia de fuentes: "FontAwesome"; sombra de texto: 1px 1px 0 rgba (0,0,0,0.3); } .jp-controls li { pantalla: en línea; } .jp-controla una { color: #fff; }
Botón de reproducción y pausa

Para la reproducción y pausa, así como el botón de volumen, estableceremos su position en absolute , es por eso que configuramos .jp-gui en relativo anteriormente. Por lo tanto, la posición de estos botones será relativa a su padre más cercano en lugar de a la ventana del navegador.

 .jp-play, .jp-pause { ancho: 60px; altura: 40px; pantalla: bloque en línea; alineación de texto: centro; altura de línea: 43px; borde derecho: 1px sólido # d22f0f; } .jp-controles .jp-play: hover, .jp-controls .jp-pause: hover { color de fondo: # de3918; } .jp-mute, .jp-unmute { posición: absoluta; derecha: 55px; arriba: 0; ancho: 20px; altura: 40px; pantalla: bloque en línea; altura de línea: 46px; } .jp-mute { alineación de texto: izquierda; } .jp-time-holder { color: #FFF; tamaño de fuente: 12px; altura de línea: 14px; posición: absoluta; derecha: 90px; arriba: 14px; sombra de texto: 1px 1px 0 rgba (0,0,0,0.3); }
Barra de progreso y volumen

La barra de progreso tendrá un aspecto similar, solo que son de tamaño diferente. El progreso obviamente debería ser más largo y más grande que la barra de volumen.

 .jp-progress { color de fondo: # 992E18; radio del borde: 20px 20px 20px 20px; desbordamiento: oculto; posición: absoluta; derecha: 133px; superior: 15px; ancho: 210px; -webkit-box-shadow: 0 1px 1px 0 rgba (0,0,0,0.2) inserto; caja-sombra: 0 1px 1px 0 rgba (0,0,0,0.2) inserto; } .jp-play-bar { altura: 12px; color de fondo: #fff; radio del borde: 20px 20px 20px 20px; } .jp-volume-bar { posición: absoluta; derecha: 10px; arriba: 17px; ancho: 45px; altura: 8px; radio del borde: 20px 20px 20px 20px; -webkit-box-shadow: 0 1px 1px 0 rgba (0,0,0,0.1) inserto; caja-sombra: 0 1px 1px 0 rgba (0,0,0,0.1) inserto; color de fondo: # 992E18; desbordamiento: oculto; } .jp-volume-bar-value { color de fondo: #fff; altura: 8px; radio del borde: 20px 20px 20px 20px; }

Y esto es todo! Son varios pasos pero con ellos podrás tener un reproductor de audio, que aunque simple te podrá dar esta funcionalidad en tu web.

 

1 comentario en «Cómo crear un reproductor de audio»

Deja un comentario