Это может помочь вам, fbc_array
- это дешифраторный шум, используйте fbc_array[value]
для получения этого шума.пример:
window.onload = function() {
var file = document.querySelector('input');
file.onchange = function(e) {
var boton = e.target.files;
var archivo = boton[0];
if (!archivo.type.match(/audio/)) {
alert("Seleciona un audio, por favor.");
} else {
var lector = new FileReader();
lector.readAsDataURL(archivo);
lector.addEventListener("load", initMp3Player, false);
}
}
function initMp3Player(e) {
var result = e.target.result;
var audio = document.querySelector('audio');
audio.src = result;
context = new AudioContext();
analyser = context.createAnalyser();
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
function frameLooper() {
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
document.querySelector('#o1').style.transform = 'scale(' + fbc_array[1] / 75 + ')';
document.querySelector('#o2').style.transform = 'scale(' + fbc_array[50] / 100 + ')';
document.querySelector('#o3').style.transform = 'scale(' + fbc_array[100] / 200 + ')';
}
}
* {
margin: 0;
padding: 0;
cursor: default;
}
body {
background: #222;
}
input {
position: fixed;
left: 0;
right: 0;
margin: auto;
background: rgb(76, 142, 250);
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: .875em;
padding: 10px 24px;
}
#o1 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
background: #333;
margin: auto;
border-radius: 50%;
}
#o2 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #0074d9;
border-radius: 50%;
}
#o3 {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #fff;
border-radius: 50%;
}
<input type="file"></input>
<audio autoplay></audio>
<div id="o1"></div>
<div id="o2"></div>
<div id="o3"></div>