时间戳

首页 > 解决方案 > 无法让 chrome 中录制的音频 blob 在 safari 中工作

javascript - 无法让 chrome 中录制的音频 blob 在 safari 中工作

问题描述

我正在尝试在 safari 中播放一个音频 blob，它播放了几分之一秒，我从来没有听到任何音频。媒体元素在播放时触发“暂停”事件一小部分时间（例如：0.038s）。

该 blob 记录在 Chrome 中。在 Chrome 和 Firefox 中播放效果很好。

此外，safari 中媒体的报道持续时间比应有的时间短得多。例如，给定的记录为 7.739 秒，chrome 识别出正确的持续时间，但 safari 显示的持续时间为 1.584。或者另一个持续时间为 9.96，但 safari 报告为 6.552。

我已尝试确保这不是 Safari 在用户未启动时阻止播放的问题。因此，轻按一下即可开始播放。我也尝试过不同的哑剧类型。mpeg。带有 h264 和 vp8 编解码器的 webm。
我已确保下载 blob 在 safari 中的大小与在 chrome 中的大小相同。

我浏览了许多类似的帖子，其中包括@lastmjs 给出的答案在提供演示的Safari 中通过Blob URL 加载音频失败。该演示确实有效，我正在或多或少地做所显示的。我怀疑问题出在记录方面。

录音机：

self.mediaRecorder = new MediaRecorder(stream,{'audio' : {'sampleRate' : 22000}});

  ...assemble the chunks...

self.audioBlob = new Blob(self.audioChunks, {type: 'audio/webm; codecs=vp8'});

  ...upload the blob to cloud (S3)...

玩家：

  ...in the success handler that downloads blob...

self.audioBlob =  new Blob([data],{type: 'audio/webm'});

  ...I later prepare the element for playback...

let audioUrl = window.URL.createObjectURL(self.audioBlob);
let audioElement = document.createElement('audio');
let sourceElement = document.createElement('source');

audioElement.muted = true;

audioElement.appendChild(sourceElement);

sourceElement.src = audioUrl;
sourceElement.type = 'audio/webm';

document.body.appendChild(audioElement);
audioElement.load()

   ... when the user taps on a button...

self.audioElement.muted = false;
let playPromise = self.audioElement.play();

playPromise.then(()=>{
    console.log("playing should have started: " + self.audioElement.muted + " - " + self.audioElement.paused);
  });

  ...shortly after this - the paused event handler gets fired.

没有错误消息。我正在 Mac 和 iOS 上的 Safari 上尝试这个。没有错误。我还监听了媒体元素上的错误事件，没有任何反应。就是玩不了多久。我显然错过了一些东西。再次捕获和播放在 Chrome 中效果很好。并且可以在 Firefox 中播放。但是在 Safari 中播放是行不通的。我应该尝试什么？

标签： javascript

解决方案

对于遇到相同问题的每个人，请尝试将“audio/webm”更改为“audio/wav”

推荐阅读