Después de indagar en varios repositorios y páginas webs al concluir nos hemos encontrado la solución que te enseñamos pronto.
Solución:
Puede crear un conjunto de controles de audio personalizados de muy buen aspecto para el reproductor de audio HTML5 con bastante rapidez. Todo lo que se requiere es usar (en su mayoría) HTML y CSS básicos, con un manejo ligero de eventos de Javascript. Esta solución es un reproductor de audio personalizado completamente funcional basado en el diseño proporcionado.
El código completo y el ejemplo se pueden encontrar en jsFiddle: https://jsfiddle.net/mgaskill/zo3ede1c/. Haga clic y juegue con él como desee, porque realmente es un reproductor de audio que funciona.
El jugador
El reproductor incluye todos los elementos descritos en el diseño original. Puedes ver esto (y comparar con el original) en esta primera imagen:
Además, extendí el diseño ligeramente al proporcionar una “bandeja de información” plegable, que se oculta y se muestra presionando el botón “Más información” a la derecha. Puedes ver la bandeja desplegada en la segunda imagen:
Claro, los colores no son idénticos y puede haber diferencias específicas de píxeles con respecto al diseño original, pero está muy cerca. Mi conjunto de habilidades principales no es CSS, por lo que hay margen de mejora allí. Sin embargo, está muy, muy cerca del diseño original y conserva todo el espíritu, el diseño y la funcionalidad de ese diseño.
Las herramientas
Esta solución hizo uso de algunos elementos externos, por conveniencia. Estos son:
- jQuery: porque normalmente lo prefiero a Javascript simple
- jQueryUI: para el seguimiento del progreso y el control de volumen, porque la barra de progreso de HTML5 no está disponible en algunos navegadores, en particular las versiones anteriores de IE y algunos navegadores móviles
- FontAwesome: para los gráficos de los botones de reproducción / pausa y volumen / silencio
- Muestras MP3 gratuitas de Noise Addicts: para los brillantes Semper Fidelis March
El HTML
El HTML adopta el enfoque de manejar cada componente en el panel de controles de audio como un elemento separado. El diseño HTML es bastante sencillo, y los únicos bits interesantes son realmente el uso de las clases FontAwesome para lograr los iconos de estado inicial para los botones de reproducción / pausa y volumen / silencio.
00:00
00:00
MORE INFO
Track: Semper Fidelis March
Tenga en cuenta que la totalidad de los controles de audio están contenidos en el #audio-player elemento.
El CSS
El CSS da vida al HTML y, en este caso, se utiliza para proporcionar color, ubicación y acción.
#audio-player
height: 50px;
width: 500px;
overflow: hidden;
background-color: #2B2B2B;
color: white;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
#controls
height: 50px;
background-color: #808080;
width: 350px;
.time
font-size: 10px;
color: white;
position: relative;
top: 14px;
margin: 5px;
.ui-progressbar
background: #2B2B2B;
.ui-progressbar-value
background: white;
#progressbar, #volume
height: 10px;
display: inline-block;
border-radius: 0px;
border: none;
position: relative;
top: 16px;
#progressbar
width: 150px;
#play, #mute
font-size: 16px;
width: 20px;
position: relative;
top: 17px;
#play
margin-left: 15px;
#volume
width: 50px;
#more-info-box
display: inline-block;
width: 150px;
height: 50px;
position: relative;
left: 350px;
top: -50px;
padding-top: 18px;
text-align: center;
font-family: sans-serif;
font-size: 12px;
color: white;
#more-info-box, #more-info-box > span
cursor: context-menu;
#info-tray
display: inline-block;
color: white;
position: relative;
width: 100%;
top: -65px;
height: 50px;
padding: 5px;
Si bien la mayor parte de esto es bastante sencillo, están sucediendo algunas cosas interesantes.
Primero el #audio-player style invoca estilos específicos del navegador (pero no todo incluido) para deshabilitar la selección de texto de los controles:
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
Los controles de la barra de progreso de jQueryUI tienen un estilo con colores de barra usando las clases predefinidas:
.ui-progressbar
background: #2B2B2B;
.ui-progressbar-value
background: white;
div-Los controles basados en el diseño se diseñan correctamente cambiando su diseño de visualización:
display: inline-block;
Los controles se colocan explícitamente en las ubicaciones adecuadas mediante el posicionamiento relativo:
position: relative;
El Javascript
El Javascript está orientado en gran medida a manejar eventos para los distintos controles y estados.
var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;
player.onloadedmetadata = function()
duration = player.duration;
progress_bar.progressbar("option", 'max' : duration );
;
player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function()
progress_bar.progressbar('value', player.currentTime);
time.text(getTime(player.currentTime));
, false);
function getTime(t)
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
function getProgressBarClickInfo(progress_bar, e)
var offset = progress_bar.position();
var x = e.pageX - offset.left; // or e.offsetX (less support, though)
var y = e.pageY - offset.top; // or e.offsetY
var max = progress_bar.progressbar("option", "max");
var value = x * max / progress_bar.width();
return x: x, y: y, max: max, value: value ;
volume_bar.progressbar(
value : player.volume*100,
);
volume_bar.click(function(e)
var info = getProgressBarClickInfo($(this), e);
volume_bar.progressbar('value', info.value);
player.volume = info.value / info.max;
);
progress_bar.progressbar(
value : player.currentTime,
);
progress_bar.click(function(e)
var info = getProgressBarClickInfo($(this), e);
player.currentTime = player.duration / info.max * info.value;
);
play_button.click(function()
player[player.paused ? 'play' : 'pause']();
$(this).toggleClass("fa-play", !player.paused);
$(this).toggleClass("fa-pause", player.paused);
);
mute_button.click(function()
if (player.volume == 0)
player.volume = volume;
else
volume = player.volume;
player.volume = 0;
volume_bar.progressbar('value', player.volume * 100);
$(this).toggleClass("fa-volume-up", player.volume != 0);
$(this).toggleClass("fa-volume-off", player.volume == 0);
);
more_info.click(function()
audio_player.animate(
height: (audio_player.height() == 50) ? 100 : 50
, 1000);
);
los onloadedmetadata El controlador de eventos se utiliza para identificar cuándo se ha cargado el audio, de modo que el progreso de la pista se pueda inicializar a la longitud (duración) de la pista de audio.
los timeupdate El controlador de eventos se utiliza para actualizar el progreso de la pista a medida que se reproduce la pista de audio. Esto permite que la barra de progreso crezca hacia la derecha para reflejar la posición actual en la pista de audio.
los volume y progress_bar los elementos se inicializan con el control de la barra de progreso jQueryUI, y click Los controladores están configurados para permitir al usuario hacer clic dentro para cambiar la posición dinámicamente.
los play_button y mute_button manejar clics para cambiar el estado de reproducción (reproducir / pausar) o el estado de audio (volumen encendido / apagado). Estos controladores se intercambian dinámicamente en la clase FontAwesome adecuada para reflejar correctamente el estado actual del botón.
Finalmente, el more_info click handler muestra / oculta el elemento de la bandeja de información. El ocultar / mostrar está animado usando jQuery animate para proporcionar una sensación de componente estéreo, que recuerda a la expulsión de una bandeja de CD. Además, le da una agradable sensación de servo al control. Porque eso es lo que quería que hiciera, y ninguna otra razón más que esa.
Como sé, no puede diseñar el reproductor predeterminado, pero puede crear un reproductor personalizado (según su audio tag) utilizando un complemento como plyr.io, puede editar el estilo del complemento como desee.
Por ejemplo:
plyr.setup(document.querySelectorAll('.js-plyr'), );
Al final de la artículo puedes encontrar las acotaciones de otros gestores de proyectos, tú asimismo eres capaz insertar el tuyo si lo deseas.