OfflineAudioContext FFT análise com o chrome
-
21-12-2019 - |
Pergunta
eu estou tentando construir um gerador de forma de onda que ficam audiofile amplitudes de valores e exibi-los na tela o mais rápido possível (mais rápido do que em tempo real) em javascript.então, eu uso o OfflineAudioContext / webkitOfflineAudioContext , carregar o arquivo e começar a analisar.a forma de onda é para preencher uma grande lona.
eu analisar buffer em um processador.onaudioprocess função.(eu acho que é a maneira como ela funciona ?)
ele funciona bem no firefox, mas eu tenho um problema no chrome :parece que ele "salta" por cima de muito analisar para concluir ele funciona como o mais rapidamente possível e retorna apenas algumas coordenadas (algo em torno de 16).
aqui é o jsfiddle :http://jsfiddle.net/bestiole/95EBf/
// create the audio context
if (! window.OfflineAudioContext) {
if (! window.webkitOfflineAudioContext) {
$('#output').append('failed : no audiocontext found, change browser');
}
window.OfflineAudioContext = window.webkitOfflineAudioContext;
}
//var context = new AudioContext();
var length = 15241583;
var samplerate = 44100;
var fftSamples = 2048;
var waveformWidth = 1920;
var context = new OfflineAudioContext(1,length,samplerate);
var source;
var splitter;
var analyser;
var processor;
var i=0;
var average;
var max;
var coord;
processor = context.createScriptProcessor(fftSamples, 1, 1);
processor.connect(context.destination);
analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0;
analyser.fftSize = fftSamples;
source = context.createBufferSource();
splitter = context.createChannelSplitter();
source.connect(splitter);
splitter.connect(analyser,0,0);
analyser.connect(processor);
context.oncomplete = function(){
$('#output').append('<br />complete');
}
var request = new XMLHttpRequest();
request.open('GET', "http://www.mindthepressure.org/bounce.ogg", true);
request.responseType = 'arraybuffer';
request.onload = function(){
$('#output').append('loaded ! ');
context.decodeAudioData(request.response, function(buffer) {
$('#output').append('starting analysis<br />');
processor.onaudioprocess = function(e){
var data = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(data);
average = getAverageVolume(data);
max = Math.max.apply(Math, data);
coord = Math.min(average*2,255);
coord = Math.round((max+coord)/2);
ctx.fillStyle=gradient;
ctx.fillRect(i,255-coord,1,255);
console.log(i+' -> '+coord);
i++;
}
source.buffer = buffer;
source.start(0);
context.startRendering();
}, onError);
}
request.send();
function onError(e) {
$('#output').append('error, check the console');
console.log(e);
}
function getAverageVolume(array) {
var values = 0;
var average;
var length = array.length;
for (var k = 0; k < length; k++) {
values += array[k];
}
average = values / length;
return average;
}
(aqui é uma outra versão de que as forças de forma de onda para caber em 1920px ampla e gerar dados de forma de onda para quem estiver interessado : http://jsfiddle.net/bestiole/E3rSx/ )
eu realmente não entendi, como não chrome tratar cada parte do arquivo de áudio ?
obrigado por qualquer ajuda !
Solução
O google Chrome tem um bug no script de processadores no modo off-line.