Minimalista Clean reproductor de audio HTML5 con controles personalizados-reproductor de audio verde
| Autor: | greghub |
|---|---|
| Views Total: | 372 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 15, 2019 |
| Licencia: |
Vista prévia
Descripción
La biblioteca JavaScript del reproductor de audio verde le permite crear reproductores de audio HTML5 limpios mínimos con controles personalizados en la aplicación Web.
Funcionamiento
Cargue el JavaScript principal y la hoja de estilos en el documento.
<link rel="stylesheet" href="dist/css/main.min.css"> <script src="dist/js/app.js"></script>
Envuelva el elemento de audio en un contenedor DIV.
<div class="example"> <audio crossorigin> <source src="1.mp3" type="audio/mpeg"> </audio> </div>
Inicializar la reproducción de audio mediante una llamada a la función en el elemento contenedor. Hecho.
document.addEventListener('DOMContentLoaded', function() {
new GreenAudioPlayer('.example');
}); Puede personalizar los controles de audio reemplazando las variables predeterminadas en el _ variables. SCSS .
$shadow-light: rgba(0, 0, 0, .07); $shadow-medium: rgba(0, 0, 0, 0.32); $shadow-dark: rgba(0, 0, 0, 0.62); $white: #fff; $primary: #44bfa3; $light-gray: #b0b0b0; $lighter-gray: #d8d8d8; $text: #55606e;
Registro de cambios
04/15/2019
- Refactoriza y oculta los controles de volumen en iOS
04/12/2019
- Solucionado el problema cuando no se pasaba ninguna opción
03/07/2019
- Corregir el problema de exportación
02/12/2019
- Añadido soporte táctil
