使用 webaudio 生成静态波形

Question

我正在尝试生成静态波形，例如在带有 webaudio 和画布的音频编辑应用程序中。现在我正在加载一个 mp3，创建一个缓冲区，遍历 getChannelData 返回的数据。

问题是..我不太明白返回的是什么。

1. getChannelData 返回什么 - 是否适合波形？
2. 如何调整（样本大小？）以获得一个峰值 == 一秒？

3. 为什么约 50% 的值为负数？

   ctx.decodeAudioData(req.response, function(buffer) {
     buf = buffer;
   
   src = ctx.createBufferSource();
   src.buffer = buf;
   
   //create fft
   fft = ctx.createAnalyser();
   
   var data = new Uint8Array(samples);
     fft.getByteFrequencyData(data);
   
   bufferL = buf.getChannelData(0)
     for(var i = 0; i<buf.length; i++){
       n = bufferL[i*(1000)]
         gfx.beginPath();
         gfx.moveTo(i +0.5, 300);
         gfx.lineTo(i +0.5, 300 + (-n*100));
         gfx.stroke();
   

我正在生成的内容：

我想生成什么：

谢谢

Answer 1

我写了一个示例来精确地做到这一点 - https://github.com/cwilso/Audio-Buffer-Draw。这是一个非常简单的演示 - 您必须自己进行缩放，但想法就在那里。

1) 是的，getChannelData 返回该通道的音频缓冲区样本。 2）嗯，这取决于样本中峰值的频率，这不一定是一致的。我所做的绘制示例确实缩小了（这是该方法的“步骤”位），但您可能希望针对您的场景进行优化。 3) 一半的值是负数，因为声音样本介于 -1 和 +1 之间。声波是正负压波；这就是为什么“沉默”是中间的一条平线，而不是底部。

代码：

var audioContext = new AudioContext();

function drawBuffer( width, height, context, buffer ) {
    var data = buffer.getChannelData( 0 );
    var step = Math.ceil( data.length / width );
    var amp = height / 2;
    for(var i=0; i < width; i++){
        var min = 1.0;
        var max = -1.0;
        for (var j=0; j<step; j++) {
            var datum = data[(i*step)+j]; 
            if (datum < min)
                min = datum;
            if (datum > max)
                max = datum;
        }
        context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp));
    }
}

function initAudio() {
    var audioRequest = new XMLHttpRequest();
    audioRequest.open("GET", "sounds/fightclub.ogg", true);
    audioRequest.responseType = "arraybuffer";
    audioRequest.onload = function() {
        audioContext.decodeAudioData( audioRequest.response, 
            function(buffer) { 
                var canvas = document.getElementById("view1");
                drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffer ); 
            } );
    }
    audioRequest.send();
}

window.addEventListener('load', initAudio );