Visualizador de audio con elemento de audio HTML5
| Autor: | wayou |
|---|---|
| Views Total: | 9,679 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 23, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un visualizador de espectro de audio simple creado con HTML5 audio API y Canvas API.
Funcionamiento
Inserte un audio en su página HTML usando el elemento audio HTML5.
<audio src="assets/sample.mp3" id="audio" controls>HTML5 Audio element not supported</audio>
Cree un elemento canvas de HTML5 para el visualizador de audio.
<canvas id="canvas" width="800" height="350"></canvas>
Cargue la biblioteca de JavaScript principal en la parte inferior de la página HTML.
<script src="main.js"></script>
Estilo del visualizador de espectro de audio.
.bar-wrapper {
height: 300px;
position: relative;
}
.bar {
position: relative;
bottom: 0;
width: 5px;
display: inline-block;
border: 1px solid red;
height: 5px;
border-bottom: 3px solid #fff;
}
