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 puntos de venta 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 Demostración para ver cómo se verá el reproductor de audio.
- Ver demostración
- Fuente de descarga
Cómo personalizar el reproductor de audio SoundCloud
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 tomar los comienzos para 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 íconos de fuente llamado FontAwesome.
En primer lugar, descarguemos el jPlayer. El jPlayer es un complemento de jQuery que nos permite ejecutar medios enriquecidos en nuestra página web sin problemas. Siempre que pueda usar HTML y CSS, estará listo para comenzar.
Lectura recomendada: Consulte nuestros tutoriales de HTML/CSS3.
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 adecuada. Entonces enlace jquery.js y jquery.jplayer.min.js al documento html, de la siguiente manera.
<link rel="stylesheet" href="https://www.hongkiat.com/blog/web-audio-player/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 mostrará de manera más consistente en todos los navegadores, mientras que el segundo, style.css es donde ponemos nuestros estilos principales.
el sonido
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.
Estructuración del marcado HTML
Ahora es el momento de estructurar el marcado HTML para el reproductor de audio y, a continuación, se encuentran los marcados HTML que necesitamos. Lo importante de este marcado es el id=jquery_jplayer_1 atributo que se asigna en el div que contiene todo esto. 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, incluyendo 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 ni el atributo id para facilitar las cosas cuando diseñemos el reproductor de audio más adelante (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 - Disruptive Wonder for a Change</li>
</ul>
</div>
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-play" tabindex="1"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-pause" tabindex="1"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-unmute" tabindex="1" title="unmute"></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 más de cerca esta estructura HTML, encontrará los siguientes caracteres , , y . Estos caracteres son números HTML especiales para referirse y representar los caracteres de ícono que provienen de FontAwesome.
Cubrimos este tema en nuestra publicación anterior: Tutorial de CSS3: Crear un elegante botón de encendido/apagado.
Activación del reproductor de audio
A continuación, una vez que se haya 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 El formato 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 agregar este script, el audio ya se puede reproducir y si inspeccionamos el marcado HTML con Firebug u otras herramientas de desarrollo, podemos encontrar un nuevo <audio> Elemento HTML5 también generado.
Dar estilo al reproductor
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 ancla, así.
@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 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 haremos que el texto del título sea más pequeño y lo convertiremos en gris.
.jp-title {
font-size: 12px;
text-align: center;
color: #999;
}
.jp-title ul {
padding: 0;
margin: 0;
list-style: none;
}
Contenedor de GUI
La GUI del reproductor de audio está contenida dentro de un div asignado con jp-gui clase. Puede ver en la captura de pantalla anterior cómo se verá nuestro reproductor multimedia. Aplicamos colores degradados para el tema GUI y usamos este número de color para el color inicial #f34927y #dd3311 para el color final. Además, asegúrese de que el position propiedad 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 de interfaz gráfica de usuario
La sección de control de la GUI contiene la interfaz de usuario para controlar el audio, como el botón de reproducción y pausa, el botón de volumen y silencio. En esta sección, establecemos el font-family propiedad a FuenteAwesomey cambie el color del texto a blanco y agregue 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 el botón de reproducción y pausa, así como el botón de volumen, configuraremos sus position a absolutees por eso que establecemos .jp-gui a un familiar anteriormente. Por lo tanto, la posición de estos botones será relativa a su padre más cercano en lugar de 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, solo son diferentes en tamaño. El progreso obviamente debería 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;
}
Esos son todos los códigos que necesitamos. Ahora puede ver la demostración y descargar la fuente desde los siguientes enlaces.
- Ver demostración
- Fuente de descarga