base64ToArrayBuffer 错误：无法在“窗口”上执行“atob”。（网络音频 API）答案

【问题标题】：base64ToArrayBuffer Error: Failed To Execute 'atob' on 'Window'. (Web Audio API)base64ToArrayBuffer 错误：无法在“窗口”上执行“atob”。（网络音频 API）
【发布时间】：2021-03-25 15:03:10
【问题描述】：

所以我对 Web Audio API 还是很陌生，4 天前才听说过它（尽管从那时起我已经投入了大约 50 个小时的研究和实验）。我也是 javascript 的新手。

情况：我正在尝试开发一个脚本，该脚本将从 API 获取 Google 的 TTS 返回（编码为 base64 字符串）并将其传输到 arrayBuffer 以在 Web Audio API 中使用，以便我可以发送它通过一些节点。

我已经从集成到我的网站中的 Google TTS API 获得了回报。当我在我的计算机上的测试服务器上测试脚本时，我可以听到 audioContext 以轻微静态的形式激活。但是，我的 base64ToArray 字符串之一弹出错误，我似乎无法诊断或修复。

这是错误：

未捕获的 DOMException：无法在“Window”上执行“atob”：要解码的字符串未正确编码。在 base64ToArrayBuffer(16:31) 在 (10:23)

这是代码。为了这篇文章，我只保留了 base64 字符串的一部分。另附注：我尝试通过包含数据 URI 以及 base64String 来格式化 base64Strings - 这两种方法都不起作用。

任何帮助将不胜感激！

var isPlaying = false;
var audioContext;
var avaVoice;
var gainNode;
var reverbNode;
var pannerNode;
var updateTime = 200;
var global = global || window;

var avaVoiceDataUri = base64ToArrayBuffer('UklGRuC6DABXQVZFZm10IBAAAAABAAIAAHcBAADKCAAGABgAYmV4dFoCAABNdWx0aW1lZGlhIGludGVyZmFjZSBzb3VuZCBlZmZlY3QuIFVJIEh1ZCBtb2Rlcm4gYW5kIFNjaWVudGlmaWMuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');

var impulseResponse = base64ToArrayBuffer("data:audio/wav;base64,UklGRhCjBwBXQVZFZm10IBAAAAABAAIARKwAAJgJBAAGABgAZGF0YeyiBwAAAAAAAADRBwDKBgCwAQBA+/8y6v/yuP8JAQA2R/");


function base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++)        {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}



function initSound() {
    audioContext = new AudioContext();
    

    avaVoice.crossOrigin = "anonymous";
    avaVoice.loop = false;
    var source = audioContext.createMediaElementSource(avaVoice);

    gainNode = audioContext.createGain();
    gainNode.gain.value = 0.5;

    reverbNode = audioContext.createConvolver();
    var reverbSoundArrayBuffer = base64ToArrayBuffer(impulseResponse);
    audioContext.decodeAudioData(reverbSoundArrayBuffer,
        function(buffer) {
            reverbNode.buffer = buffer;
        },
        function(e) {
            alert("Error when decoding audio data" + e.err);
    });

    // Connect the audio chain together
    source.connect(gainNode);
    gainNode.connect(reverbNode);
    reverbNode.connect(audioContext.destination);

    avaVoice.play();
  var intervalId = setInterval(updateTime);
}




window.addEventListener("click", function(){
    isPlaying = true
});



initSound();

【问题讨论】：

标签： javascript html base64 web-audio-api

【解决方案1】：

您的 base64 无效。

在我看来，您最后缺少A。如果你添加它，它解码就好了。

另请注意，如果您使用的是 atob，则不会包含数据 URI 部分。

如果您确实有一个数据 URI 开头，则应该使用 Fetch API 来获取 Blob，这样就可以包含 MIME 类型。然后，您可以直接从中解码音频数据。另见：https://stackoverflow.com/a/62677424/362536

【讨论】：

base64 字符串只是实际字符串的一小部分。我不想发布整个内容，因为它很大。我可能会尝试使用您提到的 Fetch API，看看是否可行。谢谢！
另外，我从来没有使用 Fetch 来获取 blob。在我的代码上下文中，这究竟会如何？我一直在研究它，但我找不到任何人在类似的情况下使用它。再次感谢！