Cómo crear un elegante reproductor de audio web
Todavía recuerdo que a principios de la década de 2000 había muchas restricciones para reproducir multimedia (audio y video) en línea. Es fácil dar las cosas por sentadas, especialmente porque hoy en día tenemos muchos canales para reproducir audio como last.fm o video como Youtube.
En este artículo, como sugiere el título, crearemos un reproductor de audio web. Si utiliza un sitio web de podcasting y desea crear un reproductor multimedia que se adapte a su diseño web general, entonces este artículo puede ser para usted.
Haga clic en el botón de demostración para ver cómo se ve el reproductor de audio.
Cómo personalizar el reproductor de audio SoundCloud
La transmisión de audio ha estado en Internet desde 1990 y no es muy popular ... Lee mas
Lo que necesitamos
Antes de que podamos crear un reproductor de audio, debemos preparar algunos elementos clave para él: jugador, jQuery y un conjunto de iconos de fuentes llamados fuente genial.
Primero, vamos Descargar jPlayer.jPlayer es un complemento de jQuery que nos permite lanzar fácilmente medios en páginas web. Siempre que sepa HTML y CSS, puede comenzar.
Lectura recomendada: Vea nuestro tutorial sobre HTML/CSS3.
jPlayer es esencialmente un complemento de jQuery, por lo que también lo necesitamos Descargar jQuery Para trabajar, al momento de escribir, jQuery se encuentra actualmente en la versión 1.8.2.También necesitamos íconos para la interfaz gráfica del reproductor multimedia, esta vez usaremos FontAwesome proporciona iconos.
Luego extraemos todos los archivos descargados y colocamos todo, incluidos los archivos jPlayer, jQuery y fuentes en las carpetas correspondientes. 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 las bibliotecas jQuery y jPlayer, tenemos dos archivos CSS vinculados allí. normalize.css restablecerá o normalizará los estilos del navegador para que nuestras páginas web se muestren de manera más consistente en diferentes navegadores, mientras que este último, style.css aquí ponemos nuestros principales estilos.
audio
Para propósitos de demostración en esta lección usaremos kelly anderson De su conversación en TEDx Phoenix. Bueno, en realidad es video, pero solo puedes extraer audio con una de las siguientes herramientas: Fácil descarga en Youtube (extensión FF) o KeepVid.com.
Crear marcado HTML
Ahora es el momento de crear la etiqueta HTML para el reproductor de audio, a continuación se muestra la etiqueta HTML que necesitamos. Lo importante de esta etiqueta es esto id=jquery_jplayer_1 propiedades asignadas a div Contiene todos ellos. Este identificador se utilizó posteriormente para asociar esta estructura con jPlayer mediante la función jQuery.
Además, todas las clases asignadas a las siguientes estructuras, incl. jp-play, jp-pause, jp-mute y jp-unmute Ambas son clases estándar utilizadas en jPlayer. Le recomiendo que no cambie estas clases, así como la propiedad id, para que sea más fácil cuando diseñemos el reproductor de audio más tarde (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 detenidamente esta estructura HTML, encontrará los siguientes caracteres , ,  y Estos caracteres son números HTML especiales que se utilizan para citar y mostrar caracteres en los íconos de FontAwesome.
Cubrimos este tema en nuestro último artículo: Tutorial de CSS3: Cree un elegante botón de encendido/apagado.
Activar el reproductor de audio
Luego, una vez que se borran las etiquetas HTML, simplemente activamos el reproductor usando el siguiente script. En este script, proporcionamos la fuente de audio como se muestra a continuación, agregue dos fuentes, mp3 y oga. Esta oga El formato ampliará la compatibilidad con varios 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"
});
});
Una vez que agregamos este script, el audio está realmente listo para reproducirse, y si verificamos el etiquetado HTML con Firebug u otras herramientas de desarrollo, podemos encontrar uno nuevo. <audio> También se generan elementos HTML5.
Diseña el reproductor
En esta sección, comenzaremos a agregar estilos para que el reproductor de audio se vea mejor, comenzaremos definiendo una nueva familia de fuentes y eliminando el subrayado del sujetador, como se muestra a continuación.
@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. Simplemente haremos que el texto del título sea más pequeño y lo colorearemos de 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 interfaz gráfica del reproductor de audio está incluida en un div asignado a jp-gui clase. Puede ver cómo se ve nuestro reproductor multimedia en la captura de pantalla anterior. Aplicamos un color degradado al tema de la GUI y usamos este número de color como color inicial. #f34927, y #dd3311 para el color final También asegúrese position esta propiedad div Se define como 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 controles GUI contiene la interfaz de usuario para el control de volumen, como los botones de reproducción y pausa, volumen y silencio. font-family Propiedad fuente genialy cambie el color del texto a blanco y agregue texto sombra.
.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;
}
botones de reproducción y pausa
Los ajustaremos para los botones de reproducción y pausa y volumen. position ellos llegan absolute, por eso preguntamos .jp-gui antiguos parientes. Por lo tanto, las posiciones de estos botones serán relativas a su padre inmediato, no en 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 barra de volumen
La barra de progreso se ve similar, solo que con un tamaño diferente. Obviamente, el progreso 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;
}
Este es todo el código que necesitamos. Ahora puede ver la demostración y descargar el código fuente desde el siguiente enlace.
Deja una respuesta