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

时间:2015-07-15 09:29:03

标签: javascript audio web-audio getusermedia

我正在做什么

我使用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);
}

服务器端(python)

在服务器端,我只是将块写在一个文件中:

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

问题

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

以下是一个例子:

waveform

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

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

spectorgram

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

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

问题

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

声明

我不是音频专家,所以我只能以非常业余的方式分析结果,但我希望这些图形不言自明。

1 个答案:

答案 0 :(得分:8)

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

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