Skip to content

SAFARI_AUDIO_FIX.md

Latest commit

 

History

History
109 lines (76 loc) · 3.37 KB

SAFARI_AUDIO_FIX.md

File metadata and controls

109 lines (76 loc) · 3.37 KB

Safari 浏览器音频录音兼容性修复

问题描述

在 Safari 浏览器上使用录音功能时，会出现以下错误：

这是因为 Safari 浏览器不支持 audio/webm;codecs=opus 格式，而代码中硬编码了这个 MIME 类型。

解决方案

1. 创建音频工具类 (src/utils/audioUtils.ts)

创建了一个新的工具类来处理浏览器兼容性问题：

  • getSupportedMimeType(): 自动检测浏览器支持的音频格式
  • createMediaRecorder(): 创建兼容的 MediaRecorder 实例
  • getAudioBlobType(): 获取兼容的音频 Blob 类型
  • getBrowserInfo(): 获取浏览器信息用于调试
  • testAudioFormats(): 测试所有音频格式的支持情况

2. 支持的音频格式优先级

按优先级顺序检测以下格式：

  1. audio/webm;codecs=opus (Chrome, Firefox)
  2. audio/webm (Chrome, Firefox)
  3. audio/mp4 (Safari, iOS)
  4. audio/ogg;codecs=opus (Firefox)
  5. audio/wav (通用)
  6. audio/aac (Safari, iOS)
  7. audio/mpeg (通用)

3. 更新的文件

  • src/views/simulation/ProjectSetupView.vue
  • src/views/simulation/SimulationView.vue

4. 测试页面

创建了 audio-test.html 测试页面，可以在不同浏览器中测试音频格式支持情况。

使用方法

在代码中使用

import { createMediaRecorder, getAudioBlobType, getBrowserInfo } from '@/utils/audioUtils'

// 创建兼容的 MediaRecorder
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
const mediaRecorder = createMediaRecorder(stream)

// 创建兼容的音频 Blob
const audioBlob = new Blob(audioChunks, { type: getAudioBlobType() })

// 获取浏览器信息
const browserInfo = getBrowserInfo()
console.log('Browser:', browserInfo.name, browserInfo.version)

测试音频格式支持

import { testAudioFormats } from '@/utils/audioUtils'

// 在控制台输出支持的音频格式
testAudioFormats()

浏览器兼容性

浏览器 支持的格式 状态
Chrome audio/webm;codecs=opus ✅
Firefox audio/webm;codecs=opus, audio/ogg;codecs=opus ✅
Safari audio/mp4, audio/aac ✅
Edge audio/webm;codecs=opus ✅
iOS Safari audio/mp4, audio/aac ✅

调试信息

在录音开始时，控制台会输出以下信息：

  • 浏览器名称和版本
  • 是否为 Safari 或 iOS 设备
  • 支持的音频格式列表
  • 最终选择的音频格式

注意事项

  1. Safari 限制: Safari 在某些情况下可能仍然有限制，特别是在 HTTPS 要求方面
  2. iOS 设备: iOS 设备上的 Safari 有额外的限制，需要用户明确授权
  3. 音频质量: 不同格式的音频质量可能略有差异
  4. 文件大小: 不同格式的音频文件大小可能不同

故障排除

如果仍然遇到问题：

  1. 检查浏览器控制台的错误信息
  2. 确认网站运行在 HTTPS 环境下
  3. 检查麦克风权限是否已授予
  4. 使用 audio-test.html 页面测试音频格式支持情况

相关链接