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

Question

我创建了一个应用程序，它使用 JavaScript 的网络音频 API 在应用程序中一起唱歌。这在 iOS Safari 和 Chrome 上运行良好，但在 Android Chrome 上的音质很差。为了解决这个问题，我尝试更改音频 deviceId，但它仍然不起作用。有人知道可能有帮助的信息吗？

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

这是我的代码

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

有一个类似的问题，当我们在某些 Android 设备上的 Chrome 上运行我们的 HTML/JS 录制客户端时，我们收到了关于非常低的声音/增益 - 几乎听不见 - 的投诉。

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

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

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

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

Answer 2

在尝试使用getDisplayMedia 构建高质量音频时，过去我传递了MediaStreamConstraints，它删除了输入轨道上的一些默认处理：

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

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