Question

我正在尝试构建一个波形生成器，它可以获得音频文件的幅度值，并在javascript中尽快（比实时更快）将它们显示在画布上。所以我使用OfflineAudioContext / webkitOfflineAudioContext，加载文件并开始分析。波形填充宽幅画布。

我在processor.onaudioprocess函数中分析缓冲区。（我想这是它的工作方式？）

它在firefox中工作得很好，但我在chrome中遇到了一个问题：看起来它“跳过”很多分析来完成它尽快工作并且只返回一些坐标（类似于16）。

这里是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;
}

（这是另一个强制波形适合1920px宽并为感兴趣的人生成波形数据的版本：http://jsfiddle.net/bestiole/E3rSx/）

我真的不明白这一点，Chrome怎么不处理音频文件的每一部分？

感谢您的帮助！

Answer 1

Chrome在离线模式下的脚本处理器中存在错误。

OfflineAudioContext使用chrome进行FFT分析

1 个答案: