Question

我在decodeAudioData方法中使用Web Audio API方法在Chrome中播放时遇到问题（在Firefox中运行正常） -

我正在从服务器发送媒体记录器记录的音频缓冲区。

服务器端

wss = new WebSocketServer({server: server}, function () {});

wss.on('connection', function connection(ws) {

   ws.binaryType = "arraybuffer";

   ws.on('message', function incoming(message) {
     if ((typeof message) == 'string') {
        console.log("string message: ", message);
     } else {
        console.log("not string: ", message);
        ws.send(message);
     }
   });
});

客户端

window.AudioContext = window.AudioContext||window.webkitAudioContext;
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

var context = new AudioContext();
var mediaRecorder;
var chunks = [];
var startTime = 0;

ws = new WebSocket(url);
ws.binaryType = "arraybuffer";

ws.onmessage = function(message) {
    if (message.data instanceof ArrayBuffer) {
        context.decodeAudioData(message.data, function(soundBuffer){
            playBuffer(soundBuffer);
        },function(x) {
            console.log("decoding failed", x)
        });
    } else {
        console.log("not arrayBuffer", message.data);
    }
};

createMediaRecorder();
function createMediaRecorder() {
    if (navigator.getUserMedia) {
        console.log('getUserMedia supported.');

        var constraints = {
            "audio": true
        };

        var onSuccess = function(stream) {
            var options = {
                audioBitsPerSecond : 128000,
                mimeType : 'audio/webm\;codecs=opus'
            };
            mediaRecorder = new MediaRecorder(stream, options);
        };

        var onError = function(err) {
            console.log('The following error occured: ' + err);
        };

        navigator.getUserMedia(constraints, onSuccess, onError);

    } else {
        alert('getUserMedia not supported on your browser!');
    }
}

function playBuffer(buf) {
    var source = context.createBufferSource();
    source.buffer = buf;
    source.connect(context.destination);
    if (startTime == 0)
        startTime = context.currentTime + 0.1; // add 50ms latency to work well across systems
    source.start(startTime);
    startTime = startTime + source.buffer.duration;
}

function startRecording() {
    mediaRecorder.start();
    getRecordedData();
}

function getRecordedData() {
    mediaRecorder.ondataavailable = function(e) {
        console.log('ondataavailable: ', e.data);
        chunks.push(e.data);
    };
}

function sendRecordedData() {
    var superBuffer = new Blob(chunks, {type: 'audio/ogg'});
    ws.send(superBuffer);
}

function stopRecording() {
    mediaRecorder.stop();
    mediaRecorder.onstop = function(e) {
        sendRecordedData();
        chunks = [];
    };
}

使用firefox进行测试时工作正常但使用chrome会产生以下错误：

Uncaught (in promise) DOMException: Unable to decode audio data

任何建议都会有所帮助，在此先感谢。

Answer 1

我遇到了同样的错误。更新Chrome无法修复它。但是，在Firefox中进行调试却给了我一个更具描述性的错误：

The buffer passed to decodeAudioData contains an unknown content type.

Uncaught (in promise) DOMException: MediaDecodeAudioDataUnknownContentType

Uncaught (in promise) DOMException: The given encoding is not supported.

这是由于找不到我要加载的.mp3文件而引起的。因此，我提出了一个Web请求，接收到404 HTML页面，并尝试将其加载为mp3，但由于“不受支持的音频格式”而失败。

Answer 2

我遇到了同样的问题。将Chrome升级到最新版本，例如85.0.4183，为我解决了这个问题。

未捕获（在承诺中）DOMException：无法解码音频数据

2 个答案: