Como Hacerlo Web & Internet

Cómo Crear un Reproductor de Audio Personalizado para tu Sitio Web o Blog

Todavía recuerdo los primeros años de la década de 2000, cuando la reproducción de medios (audio y vídeo) en línea tenía muchas limitaciones. Es fácil dar por sentados los inicios, sobre todo porque hoy en día, tenemos muchas salidas para reproducir audio, por ejemplo, last.fm o reproducir vídeo como Youtube.

En este post, como el título indica, vamos a crear Web Audio Player. Si tienes un sitio web para podcasting y quieres crear un reproductor multimedia que se adapte al diseño general de tu web, este post es probablemente para ti.

Haz clic en el enlace de demostración para ver cómo será el reproductor de audio.

Qué necesitamos

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

En primer lugar, vamos a descargar el jPlayer. El jPlayer es un plugin de jQuery que nos permite ejecutar medios en nuestra página web sin problemas. Siempre que sepas HTML y CSS estarás listo para empezar.

jPlayer es esencialmente un plugin de jQuery, por lo que también necesitamos descargar jQuery para que funcione, y en el momento de escribir esto jQuery está actualmente en la versión 1.8.2. También necesitamos algunos iconos para la interfaz gráfica de usuario del reproductor multimedia, y esta vez utilizaremos FontAwesome para entregar los iconos.

Después, extraemos todos los archivos descargados y ponemos todo el material, incluyendo los archivos de jPlayer, el jQuery y las fuentes en una carpeta apropiada. Luego enlazamos jquery.js y jquery.jplayer.min.js al documento html, como sigue.

<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 puedes ver, además de la librería jQuery y jPlayer, también hemos enlazado dos archivos CSS ahí. El primero, normalize.css, restablecerá o normalizará los estilos del navegador, de modo que nuestra página web se renderizará de forma más consistente en todos los navegadores, mientras que el segundo, style.css, es donde ponemos nuestros estilos principales.

El audio

Para la demostración en este tutorial, vamos a utilizar el audio de Kelli Anderson de su presentación en TEDx Pheonix. Bueno, en realidad es un vídeo, pero puedes extraer el audio sólo a través de una de las siguientes herramientas, Easy Youtube Downloader (FF Extension) 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 están las marcas HTML que necesitamos. Lo importante de este marcado es el atributo id=jquery_jplayer_1 que se asigna en el div que contiene todo esto. Este id se utiliza para enlazar esta estructura con jPlayer posteriormente a través de la función jQuery.

Además, todas las clases asignadas en la siguiente estructura, incluyendo 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 estilicemos el reproductor de audio más adelante (a menos que realmente sepas lo que estás 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 - Disruptive Wonder for a Change</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-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

Si observa detenidamente esta estructura HTML, encontrará los siguientes caracteres &#61515;, &#61516;, &#61480; y &#61478;. Estos caracteres son números especiales de HTML para referirse y renderizar los caracteres de los iconos que provienen de FontAwesome.

Activar el reproductor de audio

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

$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
        oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
      });
    },
    swfPath: "/js",
    supplied: "mp3,oga"
  });
});

Después de añadir este script, el audio realmente ya es reproducible y si inspeccionamos el marcado HTML usando Firebug u otras herramientas de desarrollo, podemos encontrar un nuevo elemento <audio> HTML5 también generado.

Personalizando el reproductor

En esta sección comenzaremos a añadir estilos para que el reproductor de audio tenga un mejor aspecto, y empezaremos definiendo la nueva familia de fuentes y eliminando el subrayado del elemento ancla, de esta manera.

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
.jp-jplayer,.jp-audio {
width: 420px;
margin: 50px auto;
}

Título del audio

No cambiaremos mucho el estilo de esta sección, ya que sólo contiene el texto del título del audio que se está reproduciendo. Sólo haremos el texto del título más pequeño y lo pondremos en gris.

.jp-title {
font-size: 12px;
text-align: center;
color: #999;
}

.jp-title ul {
padding: 0;
margin: 0;
list-style: none;
}

Contenedor GUI

La GUI del reproductor de audio está contenida dentro de un div asignado con la clase jp-gui. Usted puede ver en la captura de pantalla anterior cómo nuestro reproductor de medios se verá. Aplicamos colores de degradado para el tema de la GUI y utilizamos este número de color para el color inicial #f34927, y #dd3311 para el color final. También, asegúrese de que la propiedad de posición para este div se define a relative.

.jp-gui {
position: relative;
background: #f34927;
background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
border-radius: 3px;
overflow: hidden;
margin-top: 10px;
}

Control GUI

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

.jp-controls {
padding: 0;
margin: 0;
list-style: none;
font-family: "FontAwesome";
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.jp-controls li {
display: inline;
}

.jp-controls a {
color: #fff;
}

Botón de reproducción y pausa

Para los botones de reproducción y pausa, así como para el botón de volumen, estableceremos position como absolute, por lo que anteriormente establecimos .jp-gui como relative. Así, la posición de estos botones será relative a su padre más cercano y no a la ventana del navegador.

.jp-play,.jp-pause {
width: 60px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
border-right: 1px solid #d22f0f;
}

.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
background-color: #de3918;
}

.jp-mute,.jp-unmute {
position: absolute;
right: 55px;
top: 0;
width: 20px;
height: 40px;
display: inline-block;
line-height: 46px;
}

.jp-mute {
text-align: left;
}
.jp-time-holder {
color: #FFF;
font-size: 12px;
line-height: 14px;
position: absolute;
right: 90px;
top: 14px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

Barra de progreso y volumen

La barra de progreso tendrá un aspecto similar, sólo se diferencian en el tamaño. El progreso, obviamente, debe ser más largo y más grande que la barra de volumen.

.jp-progress {
background-color: #992E18;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
right: 133px;
top: 15px;
width: 210px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}

.jp-play-bar {
height: 12px;
background-color: #fff;
border-radius: 20px 20px 20px 20px;
}

.jp-volume-bar {
position: absolute;
right: 10px;
top: 17px;
width: 45px;
height: 8px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
background-color: #992E18;
overflow: hidden;
}

.jp-volume-bar-value {
background-color: #fff;
height: 8px;
border-radius: 20px 20px 20px 20px;
}

Estos son todos los códigos que necesitamos. Ahora puedes ver la demo así como descargar el código fuente desde los siguientes enlaces.

Acerca del Autor

Dyanfield

Agregar un Comentario

Clic Aqui para Publicar un Comentario