我使用JavaScript网络音频API开发了录音，但音质很差

Question

我创建了一个应用程序，它在应用程序中与 JavaScript 的网络音频 API 一起唱歌。这在 iOS safari 和 Chrome 上完美运行，但在 Android Chrome 上音质很差。为了解决这个问题，我尝试更改音频设备ID，但仍然没有用。有人有可能有用的信息吗？

疑惑：我录制完后传文件到服务器，在另一个页面播放。我想知道这是否导致了问题。

这是我的代码

function captureUserMedia(mediaConstraints) {
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(onMediaSuccess)["catch"]();
}

function record() {
    if (getParameterByName("startSec").length !== 0) {
        masterSound.currentTime = getParameterByName("startSec");
    }
    masterSound.play();
    if (document.querySelectorAll(".record")[0].getAttribute("status") == "off") {
        document.querySelectorAll(".record")[0].setAttribute("status", "on");
        document.querySelectorAll(".record")[0].classList.add("stoped");
        var mediaConstraints;
        const devices = navigator.mediaDevices.enumerateDevices()
        devices.then((value) => {
            // mediaConstraints = {
            //     audio: {
            //         deviceId: {
            //             exact: value[0].deviceId
            //         }
            //     },
            //     video: false
            // };
            mediaConstraints = {
                audio: true,
                video: false,
            };
            captureUserMedia(mediaConstraints, onMediaSuccess);
        });

    } else {
        document.querySelectorAll(".record")[0].setAttribute("status", "off");
        document.querySelectorAll(".record")[0].classList.remove("stoped");
        mediaRecorder.stream.stop();
        masterSound.pause();
    }
}

function onMediaSuccess(stream) {
    var audio = document.createElement('audio');
    audio.controls = true;
    audio.files = true;
    audio.muted = true;
    audio.srcObject = stream;
    audio.play();
    var audiosContainer = document.querySelectorAll(".audio_wrapper")[0];
    audiosContainer.appendChild(audio);
    audiosContainer.appendChild(document.createElement('hr'));
    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'audio/wav';
    mediaRecorder.stream = stream;
    mediaRecorder.recorderType = MediaRecorderWrapper;
    mediaRecorder.audioChannels = 1;
    mediaRecorder.start();
    mediaRecorder.ondataavailable = function (blob) {
        audioFile = blob;
        var blobURL = URL.createObjectURL(blob);
        document.querySelectorAll(".append_audio")[0].setAttribute("src", blobURL);

        function blobToFile(theBlob, fileName) {
            theBlob.lastModifiedDate = new Date();
            theBlob.name = fileName;
            return theBlob;
        }

        submit();

        function submit() {
            var audioTest = new Audio(URL.createObjectURL(blob));
            audioTest.play();
        }
    };
}

Answer 1

尝试使用 getDisplayMedia, in the past I've passed in MediaStreamConstraints 构建高质量音频时删除输入轨道上的一些默认处理：

stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: { channels: 2, autoGainControl: false, echoCancellation: false, noiseSuppression: false }});

我自己仍在学习 WebRTC，所以我不确定在使用 getUserMedia 和 MediaConstraints 时是否可以传递这些相同的属性，但我想我会分享以防万一.听起来这也可能与可用设备有关。祝你好运！

Answer 2

有一个类似的问题，当运行在 Chrome 上某些 Android 设备。

最终购买了旧三星 phone (Galaxy A8) 以轻松重现该问题。

罪魁祸首是 echoCancellation 被设置为 false。禁用它后，我们录制的音频音量非常低。解决方案是将 echoCancellation 设置为 true.

我们最终完全删除了约束并依赖于每个浏览器的默认设置（echoCancellation 在 Chrome、Safari、Firefox 上默认启用）。

值得一提的是，autoGainControl和noiseSuppression继承了echoCancellation的值，更确切地说，如果你只设置audio: {echoCancellation: true}，其他2个约束也会被设置为true.

我使用JavaScript网络音频API开发了录音，但音质很差

I developed the recording using the JavaScript web audio API, but the sound quality is poor

javascript

audio-recording

web-audio-api