Question

我正在尝试一个打字稿+ nextJS项目：

获得访问用户麦克风的权限。
允许用户在浏览器中录制音频。
允许用户预览录制的音频，然后再上传到服务器。

除了iOS Safari浏览器外，我已经能够在所有主流浏览器（包括Mac上的Safari浏览器）上运行此功能。我在下面粘贴了当前的实现，问题是iOS Safari上的objectUrl持续时间始终为0，而audio.onloadeddata从未在iOS Safari上触发。

请问有任何指向我做错事情的指针吗？

const getUserMediaSuccess = (stream: MediaStream) => {
 const recorder = new MediaRecorder(stream);

 const dataAvailable =  (e: BlobEvent) => {
  const createdFile = new File([e.data], 'recording.mp3', {
    type: e.data.type,
  });

  const objectUrl = URL.createObjectURL(createdFile); // duration here is always 0 on iOS Safari

  const audio = new Audio(objectUrl);

  // onloadeddata does not fire on iOS safari 
  audio.onloadeddata = function... // getting audio.duration here
 }

 recorder.addEventListener('dataavailable', dataAvailable);
 recorder.start();
}

更新：通过将Blob直接传递给createObjectURL，我已经能够在iOS Safari中使用它。我在下面粘贴了新的实现。但是，我不确定是否应该使用setTimeout来模拟模拟onloadeddata，以便获得audio.duration

const getUserMediaSuccess = (stream: MediaStream) => {
 const recorder = new MediaRecorder(stream);

 const dataAvailable =  (e: BlobEvent) => {
  const blob = e.data;
  const objectUrl = URL.createObjectURL(blob); // duration here is fine on iOS safari right now

  const audio = new Audio(objectUrl);

  // onloadeddata does not fire on iOS safari 
  // audio.onloadeddata = function... // getting audio.duration here

  setTimeout(() => {
   // This works in iOS safari as well.
   // I'm not just sure if using a setTimeout is good practice.
   console.log(audio.duration);
  }, 500)
 }

 recorder.addEventListener('dataavailable', dataAvailable);
 recorder.start();
}

在iOS Safari上预览录制的音频

0 个答案: