使用不同的浏览器,使用getUserMedia获得一致的音频质量

bas*_*kum 10 javascript audio getusermedia web-audio-api

我在做什么

我正在使用getUserMedia API在浏览器中录制音频,然后将此音频发送到websocket服务器.此外,为了测试录音,我在Mac上使用soundflower作为输入设备,因此我可以播放波形文件,而不是说话麦克风.

客户端(JavaScript)

window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var audioContext = new AudioContext();
var wsClient = new WebSocket("ws://" + WEBSOCKET_URL + ":" + WEBSOCKET_PORT);

navigator.getUserMedia({audio: true}, function (stream) {
    var input = audioContext.createMediaStreamSource(stream);
    var recordNode = audioContext.createScriptProcessor(4096);
    recordNode.onaudioprocess = recorderProcess;
    input.connect(recordNode);
    recordNode.connect(audioContext.destination);
}, function (e) {
    console.error("No live audio input: " + e);
});

function recorderProcess(e) {
    var buffer = e.inputBuffer.getChannelData(0);
    wsClient.send(buffer);
}
Run Code Online (Sandbox Code Playgroud)

服务器端(python)

在服务器端,我只是在文件中写入块:

def onMessage(self, msg, binary):
    if binary:
        with open("/tmp/test.raw", "ab") as f:
            f.write(msg)
Run Code Online (Sandbox Code Playgroud)

问题

我遇到的问题是,音频似乎是由浏览器预处理的,因此最终结果与原始音频的质量不同.质量还取决于浏览器.

这是一个例子:

波形

图片显示了原始音频的三种波形,Chrome中的录制结果以及FireFox录制的结果.如您所见,波形看起来不同.特别是在Chrome中,低振幅通常只会转换为零.

观看视频时可以看到更大的差异:

spectorgram

因此,两种浏览器似乎都会切断更高的频率,而FireFox肯定会更加极端.

所有这些可能都不是什么大问题,因为音频文件听起来与我耳朵非常相似.但我正在处理和分析服务器端的音频,浏览器的预处理给我带来了更糟糕的最终结果.

那么发生了什么?这些浏览器是否有额外的步骤来预处理音频?他们可能适用什么样的过滤器?我可以在getUserMedia API中以某种方式避免这种情况吗?有没有办法提供解决方案,从而在Chrome和FireFox中产生一致的良好音质?

放弃

我不是音频专家,所以我只能以非常业余的方式分析结果,但我希望图形能说明一切.

cwi*_*lso 9

是的,您正在Chrome上获得默认输入处理.这有助于降低噪音,管理自动增益控制,并有助于避免回声.尝试在getUserMedia调用中禁用它,la:

https://github.com/cwilso/AudioRecorder/blob/master/js/main.js#L169-L183