Visualizador de audio minimalista con Canvas y Vanilla JavaScript
| Autor: | DavidLazic |
|---|---|
| Views Total: | 7,106 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 24, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un plugin de JavaScript Vanilla que utiliza Web audio API para reproducir y visualizar archivos de audio en un elemento de Canvas HTML5 .
¿Cómo funciona?
Incluya la biblioteca de JavaScript Visualizer. js en la Página Web.
<script src="visualizer.js"></script>
Inserte un audio en su página web.
<audio id="myAudio" src="1.mp3" data-author="Beethoven" data-title="Allegro"></audio>
Cree un elemento canvas para el visualizador de audio.
<div class="vz-wrapper -canvas"> <canvas id="myCanvas" width="800" height="400"></canvas> </div>
Toda la estructura HTML debe ser así:
<div class="vz-wrapper"> <audio id="myAudio" src="1.mp3" data-author="Beethoven" data-title="Allegro"></audio> <div class="vz-wrapper -canvas"> <canvas id="myCanvas" width="800" height="400"></canvas> </div> </div>
Estilo del visualizador de audio utilizando sus propias reglas CSS.
.vz-wrapper {
position: relative;
height: 100vh;
width: 100%;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#396362), to(#000000));
background: -webkit-radial-gradient(circle, #396362, #000000);
background: -moz-radial-gradient(circle, #396362, #000000);
background: -ms-radial-gradient(circle, #396362, #000000);
box-shadow: inset 0 0 160px 0 #000;
cursor: pointer;
}
.vz-wrapper.-canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: initial;
width: initial;
background: transparent;
box-shadow: none;
}
@media screen and (min-width: 420px) {
.vz-wrapper { box-shadow: inset 0 0 200px 60px #000; }
}
