javascript – 使用webaudio生成静态波形

我正在尝试使用webaudio和canvas生成类似于音频编辑应用程序的静态波形.现在我正在加载一个mp3,创建一个缓冲区,迭代getChannelData返回的数据.

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

> getChannelData返回的内容 – 是否适合波形？
>如何调整(样本大小？)以获得一个峰值==一秒？
>为什么~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();

我正在产生什么：

我想要产生什么：

谢谢

解决方法:

我写了一个样本来做到这一点 – 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 );

标签：javascript,canvas,web-audio,waveform
来源： https://codeday.me/bug/20190612/1224529.html