JavaScript Web Audio:无法正确解码音频数据?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26447932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 05:58:54  来源:igfitidea点击:

JavaScript Web Audio: cannot properly decode audio data?

javascripthtmlweb-audio-api

提问by hashahid

I'm trying to use the Web Audio API in JavaScript to load a sound into a buffer and play it. Unfortunately it doesn't work and I get the following error:

我正在尝试使用 JavaScript 中的 Web Audio API 将声音加载到缓冲区中并播放。不幸的是它不起作用,我收到以下错误:

Uncaught TypeError: Failed to set the 'buffer' property on 'AudioBufferSourceNode':
The provided value is not of type 'AudioBuffer'.

I can pinpoint which line is giving me the error, but I don't know why. Here is the relevant code if it helps:

我可以确定哪一行给了我错误,但我不知道为什么。如果有帮助,这里是相关代码:

var audioContext;
var playSoundBuffer;

function init() {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();

    loadNote();
}

function loadNote() {
    var request = new XMLHttpRequest();
    request.open("GET", "./sounds/topE.wav", true);
    request.responseType = "arraybuffer";
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            playSoundBuffer = buffer;
        }, function(error) {
            console.error("decodeAudioData error", error);
        });
    };
    request.send();

    playSound();
}

function playSound() {
    var source = audioContext.createBufferSource();
    source.buffer = playSoundBuffer;       // This is the line that generates the error
    source.connect(audioContext.destination);
    source.start(0);
}

I believe the decodeAudioData method returns an AudioBuffer to its first callback function (its second parameter). I tried to save this AudioBuffer to the "playSoundBuffer" and then play it, but I get that error and I'm not sure why. Any help would be greatly appreciated.

我相信 decodeAudioData 方法会返回一个 AudioBuffer 给它的第一个回调函数(它的第二个参数)。我试图将这个 AudioBuffer 保存到“playSoundBuffer”然后播放它,但我得到了那个错误,我不知道为什么。任何帮助将不胜感激。

回答by Winchestro

The reason you get that error is because you are ignoring the asynchronous nature of your code and treat it as if it were synchronous. If you always log the contents of all relevant parts as the first step in debugging you will realize that at the time you try to process your buffer it's undefinedand not an AudioBuffer at all. Tip: Always console.log everythinguntil you know exactly how it behaves at any point.

您收到该错误的原因是您忽略了代码的异步性质并将其视为同步。如果您总是将所有相关部分的内容记录为调试的第一步,您将意识到在您尝试处理缓冲区时,它undefined根本不是 AudioBuffer。提示:始终使用 console.log 记录所有内容,直到您确切地知道它在任何时候的行为方式。

function loadNote() {
    var request = new XMLHttpRequest();
    request.open("GET", "./sounds/topE.wav", true);
    request.responseType = "arraybuffer";
    request.onload = function() {
        audioContext.decodeAudioData(request.response, function(buffer) {
            playSoundBuffer = buffer;
            playSound(); // don't start processing it before the response is there!
        }, function(error) {
            console.error("decodeAudioData error", error);
        });
    };
    request.send();//start doing something async


}