WebAudio 的问题

Question

我正在创建一个研究实验，使用 WebAudio API 来记录用户所说的音频文件。我使用 recorder.js 想出了一个解决方案并且一切正常......直到我昨天尝试它。

我现在在 Chrome 中收到此错误：

"The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."

它指的是这个link：Web Audio API policy。这似乎是上文 link 中概述的 Chrome 新政策的结果。

所以我尝试像这样使用 resume() 来解决问题：

var gumStream; //stream from getUserMedia()
var rec; //Recorder.js object
var input; //MediaStreamAudioSourceNode we'll be recording

// shim for AudioContext when it's not avb. 
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext; //new audio context to help us record

function startUserMedia() {
    var constraints = { audio: true, video:false };
    audioContext.resume().then(() => { // This is the new part
        console.log('context resumed successfully');
    });
    
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {

        console.log("getUserMedia() success, stream created, initializing Recorder.js");
    gumStream = stream;
    input = audioContext.createMediaStreamSource(stream);
    rec = new Recorder(input, {numChannels:1});
    audio_recording_allowed = true;
    }).catch(function(err) {
        console.log("Error");
    });

}

现在在控制台中我得到：

错误

上下文成功恢复

并且流没有初始化。这在 Firefox 和 Chrome 中都会发生。我需要做什么？

Answer 1

我刚刚遇到了完全相同的问题！从技术上讲，您帮助我找到了这个答案。由于某些原因，我的错误消息不像您的那样完整，这些政策更改的 link 有答案:)

最佳做法是在用户与文档交互后创建音频上下文，而不是恢复 （当我说最佳做法时，如果您首先查看 padenot 2018 年 9 月 28 日对 this thread 的评论，他在第一个要点中提到了原因).

所以不是这个：

var audioContext = new AudioContext; //new audio context to help us record

function startUserMedia() {
    audioContext.resume().then(() => { // This is the new part
        console.log('context resumed successfully');
    });
}

只需像这样设置音频上下文：

var audioContext;

function startUserMedia() {
    if(!audioContext){
      audioContext = new AudioContext;
    } 
}

这应该可以工作，只要 startUserMedia() 在某种用户手势之后执行。

WebAudio 的问题

Problems with WebAudio

recorder.js

web-audio-api