我正在尝试构建一个波形生成器,它可以获得音频文件的幅度值,并在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('
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
'); 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/)
我真的不明白,如何不对待音频文件的每个部分?
谢谢你的帮助 !