Web Audio API - 似乎无法正常工作

Question

我对 Web Audio API 完全陌生，并且对 javascript 不太精通。但是，我有一个特定的功能，我想在我正在开发的网站中实现它，它需要返回 Base64 音频的 Google 的 TTS API 通过混响过滤器，然后（最好）自动播放生成的音频。

这就是工作流程的样子。

对 Google 的 TTS 请求 => 来自 Google 的 Base64 响应 => Base64 转换并通过 Convolver（混响）节点发送 => 输出发送到用户的输出设备。

所以我首先要努力的是从通过节点的音频文件中获得任何类型的响应。之后，我就可以处理 Base64 转换了。

任何帮助将不胜感激。我的 IDE 没有任何帮助。他们基本上都告诉我“恭喜，这段代码看起来棒极了！”。与此同时，我在这里拉扯我的头发，两行代码不会跳出我的窗口。

这是我一直在使用的代码。这显然不是全部，但我想我应该先从它发出一些声音，然后再继续。

let context;

let compressor;
let reverb;

let source1

let lowpassFilter;
let waveShaper;
let panner;

let wet;
let dry;

let masterDry;
let masterWet;




function effectsBoard () {
    context = new (window.AudioContext || window.webkitAudioContext)();

    // Effects Setup
    lowpassFilter = context.createBiquadFilter();
    waveShaper = context.createWaveShaper();
    panner = context.createPanner();
    compressor = context.createDynamicsCompressor();
    reverb = context.createConvolver();

    //Master Gains for Wet and Dry
    masterDry = context.createGain();
    masterWet = context.createGain();

    //Connect the compressor (the last effect) to the final destination (audio output)
    compressor.connect(context.destination);

    //Connect the Master Wet and Dry signals to the compressor for mixing before the output.
    masterDry.connect(compressor);
    masterWet.connect(compressor);

    //Connect Reverb to the Wet Master Gain
    reverb.connect(masterWet);

    //Connect source1 to the effectt - first the dry signal and then the wet
    source1.connect(lowpassFilter);
    lowpassFilter.connect(masterDry);
    lowpassFilter.connect(reverb);

    //Create a Source Buffer
    fetch("voice.mp3")
        .then(data => data.arrayBuffer())
        .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
        .then(decodedAudio => {
            avaAudio = decodedAudio;
        });

    //Then start the sources on run event
    function playback() {
        source1 = context.createBufferSource();
        source1.buffer = avaAudio;
        source1.start(context.currentTime);
    }

window.addEventListener("mousedown", playback);

Answer 1

在浏览您的代码时，它看起来还不错。我认为您对自动播放政策感到厌烦。

当您创建音频上下文时，它通常以暂停开始。您需要致电context.resume()，但您只能在受信任的事件上这样做。

mousedown 不是可信事件。你实际上需要一个完整的click 事件。

另外，至少在您在此处显示的代码中，似乎从未调用过 effectsBoard()，但我认为还有更多代码。

使用浏览器的开发者工具查看您需要查看的错误。