音频Blob在IOS / Safari中不起作用

Question

我正在录制音频，并将其作为Blob发送到Node.js服务器。然后，nodejs服务器将其发送给当前未记录的所有已连接用户。

发送Blob：

mediaRecorder.onstop = function(e) {
  var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' });
  socket.emit('radio', blob);
};

服务器收到Blob：

socket.on('radio', function(blob) {
  socket.broadcast.emit('voice', blob);
});

侦听器收到Blob：

socket.on('voice', function(arrayBuffer) {
  var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });
  var audio = document.getElementById('audio');
  audio.src = window.URL.createObjectURL(blob);
  audio.play();
});

此功能适用于Safari和所有ios设备以外的所有浏览器/设备。与野生动物园的检查员一起进行进一步研究，我发现了这一点：

野生动物园是否需要在标头中添加其他内容才能正确解释Blob对象？我研究了可接受的音频类型，尝试了aac / mp3 / ogg，但没有成功。在进一步阅读后，我听说了以下事实：尽管我不太清楚任何细节，但在野生动物园和IOS中流blob音频/视频数据存在错误。

礼仪方向的指导将非常有帮助！

编辑：看起来像这条线audio.src = window.URL.createObjectURL(blob);接收Blob中的是引起Blob错误的原因（我链接的图像）

编辑2：我试图查看是否使用blob以外的其他格式，选择base64编码的字符串。看起来这适用于除iOS和Safari之外的所有设备和浏览器。我的印象是它与IOS解释/加载数据的方式有关...

Answer 1

我一直无法找到使用音频元素的解决方案，但是 Web Audio Api 似乎可以解决问题： https: //developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

    var audioContext = new (window.AudioContext || window.webkitAudioContext);
    socket.on('voice', function(arrayBuffer) {
      audioContext.decodeAudioData(arrayBuffer, audioData => {
        var source = audioContext.createBufferSource();
        source.buffer = audioData;
        source.connect(audioContext.destination);
        source.start()
    });

您在 iOS 上可能仍然遇到问题，因为任何音频/视频都必须由用户操作触发。