Web Audio Api：如何添加工作的卷积器？ [英] Web Audio Api : How do I add a working convolver?

问题描述

我想学习/做什么：如何使用脉冲响应在我的代码沙箱中设置一个简单的工作卷积器（混响）。我认为这与设置过滤器类似，但事情似乎完全不同。

What I am trying to learn / do: How to set up a simple working convolver (reverb) into my code sandbox below using an impulse response. I thought it was similar to setting a filter but things seem quite different.

我尝试过的事情：与所有新技术一样，事情发生了变化快节奏使得很难知道哪种实施是正确的，哪些是不正确的。我看了无数的WebAudio Api Convolver Tutorials，很多都很老，其他人都在工作，但是太过臃肿，让人很难理解发生了什么。我尝试从mozilla文档中实现一些示例：

What I tried: As with all new technologies things change at a fast pace making it difficult to know which implementation is correct and what is not. I looked at countless WebAudio Api Convolver Tutorials, many were old and others were working but far too "bloated" making it hard to understand what is going on. I tried to implement some of the examples from the mozilla documentation:

我已经看过了： https://developer.mozilla.org/en-US/docs/Web/API/ConvolverNode/buffer

我的问题：如何在下面的上下文中正确整合卷积器？正如你所看到的那样，我试过但不能解决这个问题。

My question: How do I integrate a convolver properly in the context below? As you can see I tried but cant figure this out.

 window.addEventListener('load', init, false);

function init() {
    setupWebAudio();
}

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var filter = context.createBiquadFilter();
    var convolver = context.createConvolver();
    var inpulseRes = "hall.mp3";

    var hallBuffer = inpulseRes;
    soundSource = context.createBufferSource();
    soundSource.buffer = hallBuffer;
    convolver.buffer = hallBuffer;

    filter.type = 'lowpass';
    filter.frequency.value = 400;

var theParent = document.getElementById("test");
    theParent.addEventListener("mousedown", doSomething, false);
    function doSomething(e) {
        if (e.target !== e.currentTarget) {
            if(e.target == theParent.children[0]){
                filter.frequency.value += 200;
            }
            else if(e.target == theParent.children[1]){
                 filter.frequency.value -= 200;
            }
            else if(e.target == theParent.children[2]){
                 filter.type = 'highpass';
            }               
        }
        e.stopPropagation();
    }

    source.connect(filter);
    source.connect(convolver);
    filter.connect(context.destination);
    audio.play();
}

推荐答案

这是一个非常开放的结束了问题;你尝试了什么没有用，或者你错过了什么冲动反应应该是什么？如果是后者，搜索脉冲响应文件，你会发现可以使用的大量免费文件。您还可以将对数衰减曲线上的噪声生成到缓冲区中，您将获得基本的混响效果。创建impulseResponse缓冲区的基本方法：

This is a pretty open-ended question; what have you tried that hasn't worked, or is the piece you're missing what the "impulse response" is supposed to be? If the latter, search for "impulse response files" and you'll find tons of free files you can use. You can also generate noise on a logarithmic decay curve into a buffer, and you'll get a basic reverb effect. Basic method to create an impulseResponse buffer:

function impulseResponse( duration, decay, reverse ) {
    var sampleRate = audioContext.sampleRate;
    var length = sampleRate * duration;
    var impulse = audioContext.createBuffer(2, length, sampleRate);
    var impulseL = impulse.getChannelData(0);
    var impulseR = impulse.getChannelData(1);

    if (!decay)
        decay = 2.0;
    for (var i = 0; i < length; i++){
      var n = reverse ? length - i : i;
      impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
      impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
    }
    return impulse;
}

您的代码同时具有BufferSourceNode 和卷积器指向相同的缓冲区，这几乎肯定是错误的;你通常不使用buffersource播放一个脉冲响应文件，你通常不会使用普通的声音文件作为脉冲响应。 （如果冲动响应的作用不明确，请在维基百科上查找卷积。）您需要执行以下操作：

Your code has both a BufferSourceNode and the convolver pointing to the same buffer, which is almost certainly wrong; you don't usually play back an impulse response file using a buffersource, and you don't usually use a normal sound file as an impulse response. (Look up convolution on Wikipedia if the role of an impulse response isn't clear.) You need to do something like:

function setupWebAudio() {
    var audio = document.getElementById('music');
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var convolver = context.createConvolver();
    var irRRequest = new XMLHttpRequest();
    irRRequest.open("GET", "hall.mp3", true);
    irRRequest.responseType = "arraybuffer";
    irRRequest.onload = function() {
        context.decodeAudioData( irRRequest.response, 
            function(buffer) { convolver.buffer = buffer; } );
    }
    irRRequest.send();
// note the above is async; when the buffer is loaded, it will take effect, but in the meantime, the sound will be unaffected.

    source.connect( convolver );
    convolver.connect( context.destination );
}

这篇关于Web Audio Api：如何添加工作的卷积器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！