javascript - 我使用 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 构建高质量音频时，过去我已经通过了MediaStreamConstraints删除输入轨道上的一些默认处理:

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

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