带语音笔记功能的聊天应用iOS端（Safari/Chrome）音频播放崩溃问题求助

我来帮你梳理下这个iOS端音频崩溃的核心问题，结合你给出的代码和错误信息，主要有几个关键的代码矛盾和iOS浏览器的特性限制导致了这个问题：

1. MediaRecorder与Blob的MIME类型不匹配，且iOS不支持非标准音频编码 #

你在初始化MediaRecorder时指定了mimeType:'audio/mp4'，但最终生成Blob时却用了audio/mp3，这本身就存在格式矛盾。更关键的是：iOS的浏览器（包括Chrome for iOS，它基于Safari的WebKit内核）对MediaRecorder的编码支持有限，audio/mp3并非标准支持格式，iOS更兼容AAC编码的audio/mp4或audio/wav格式。

修复代码： #

const recordAudio = async (_) => { 
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) 
  // 改用iOS原生支持的AAC编码MP4格式
  const mediaRecorder = new MediaRecorder(stream, { 
    mimeType: 'audio/mp4; codecs=aac', 
    audioBitrate: '128000' 
  }) 
  mediaRecorder.start() 
  const audioChunks = [] 
  mediaRecorder.addEventListener('dataavailable', (event) => { 
    audioChunks.push(event.data) 
  }) 
  mediaRecorder.addEventListener('stop', () => { 
    // Blob类型与MediaRecorder保持一致
    const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }) 
    composeMessage('audio', audioBlob) 
    setIsRecording(false) 
  }) 
  setTimeout(() => { 
    mediaRecorder.stop() 
  }, 30000) 
}

2. 音频元素的source类型与实际文件类型不匹配 #

你创建音频source时指定了type='audio/mp3'，但现在生成的音频文件是MP4格式，这会导致iOS浏览器无法识别音频源，触发Unsupported source type错误。

修复代码： #

const createAudioFile = () => { 
  const audio = new Audio() 
  audio.setAttribute('preload', 'metadata') 
  const source = document.createElement('source') 
  source.setAttribute('src', URL) 
  // 同步修改为MP4类型
  source.setAttribute('type', 'audio/mp4') 
  audio.appendChild(source) 
  setAudioFile(audio) 
}

3. 播放函数重复调用play()，触发iOS自动播放限制 #

iOS有严格的自动播放政策，必须由用户主动交互触发播放。你在playPromise.then中重复调用audioFile.play()是冗余操作，还可能触发DOMException。

修复代码： #

const playAudioHandler = () => { 
  if (!audioFile) return;
  const playPromise = audioFile.play() 
  if (playPromise !== undefined) { 
    playPromise 
    .then(() => { 
      setIsPlaying(true) 
    }) 
    .catch((error) => { 
      console.error('播放失败:', error)
      pauseAudioHandler() 
      // 可选：提示用户手动点击播放，因为iOS可能需要明确的用户交互
    }) 
  } 
}

额外注意事项 #

• 检查编码支持性：可以在初始化MediaRecorder前先验证格式是否支持，做降级处理：

  if (!MediaRecorder.isTypeSupported('audio/mp4; codecs=aac')) {
    console.warn('AAC编码不支持，将改用WAV格式')
    // 这里可以 fallback 到 audio/wav
  }
  

• 系统版本要求：iOS的MediaRecorder支持从iOS 14.3开始，需要确保用户设备系统版本不低于该版本。
• 释放URL资源：使用URL.createObjectURL(audioBlob)生成播放链接后，在音频播放完毕或组件卸载时，记得调用URL.revokeObjectURL()释放内存，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Ahmed Abdelrahman