Saltar al contenido

Cómo crear un reproductor de audio personalizado para su sitio web

firebug-audio-html5

Todavía recuerdo a principios de la década de 2000 cuando la reproducción de medios enriquecidos (audio y video) en línea tenía muchas limitaciones. Es fácil dar por sentado los comienzos, especialmente porque hoy en día tenemos muchos medios para reproducir audio, es decir, last.fm o reproducir videos como Youtube.

En esta publicación, como lo indica el título, vamos a crear Web Audio Player. 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.

Cómo personalizar el reproductor de audio SoundCloud

Cómo personalizar el reproductor de audio SoundCloud

La transmisión de audio ha existido en Internet desde 1990 y no hay muchas transmisiones de audio populares … Leer más

Lo que necesitamos

Antes de crear el reproductor de audio, debemos 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 todo el material, 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.





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 mostrará de manera más consistente en todos los navegadores, mientras que en el segundo, style.css, 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 atributo 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. Te sugiero que no cambies estas clases, así como el atributo id para facilitar las cosas cuando diseñemos el reproductor de audio más adelante (a menos que realmente sepas lo que estás haciendo).