flutter web如何实现录音功能

在Flutter Web中如何实现录音功能？我尝试了一些插件如flutter_sound和record，但发现它们主要支持移动端，Web端兼容性较差。有没有可靠的方案或插件可以在Flutter Web上实现录音？需要支持基本的开始/停止录音功能，并能获取音频文件或数据流。最好能提供简单的代码示例或配置说明。

2 回复

Flutter Web 暂不支持直接录音。可通过 dart:html 调用浏览器 Web Audio API 实现录音，或使用第三方库如 record 实现跨平台录音功能。

更多关于flutter web如何实现录音功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter Web 中实现录音功能，可以使用 record 包（支持跨平台，包括 Web）。以下是实现步骤：

  1. 添加依赖
    在 pubspec.yaml 中添加：

    dependencies:
  record: ^4.3.0

  2. 配置 Web 权限
    在 web/index.html 的 <head> 中添加麦克风权限：

    <script>
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ audio: true });
  }
</script>

  3. 实现录音代码

    import 'package:record/record.dart';

class AudioRecorder {
  final Record _record = Record();
  
  Future<void> startRecording() async {
    if (await _record.hasPermission()) {
      await _record.start(
        path: null, // Web 无需文件路径
        encoder: AudioEncoder.wav, // Web 支持 WAV/PCM
      );
    }
  }
  
  Future<String?> stopRecording() async {
    return await _record.stop(); // 返回 Blob URL (Web)
  }
}

  4. 使用示例

    final recorder = AudioRecorder();

// 开始录音
await recorder.startRecording();

// 停止录音并获取 URL
String? audioUrl = await recorder.stopRecording();
// 可通过 audio-player 包播放返回的 URL

注意事项：

  • Web 端返回的是 Blob URL，可直接用于 <audio> 播放
  • 需在 HTTPS 环境或 localhost 下使用
  • 支持格式：WAV/PCM（MP3 需额外配置编码器）

替代方案：可使用 sound_stream 包处理实时音频流。

回到顶部