如何在Flutter Web中使用package:web实现麦克风录音？

核心实现代码与步骤 #

1. 依赖配置 #

先在pubspec.yaml中添加package:web依赖：

dependencies:
  web: ^0.5.1

导入包：

import 'package:web/web.dart' as web;

2. 完整录音逻辑实现 #

class WebAudioRecorder {
  web.MediaRecorder? _recorder;
  web.MediaStream? _audioStream;
  final List<web.Blob> _recordedChunks = [];

  // 启动录音（请求麦克风权限+初始化录制）
  Future<void> start() async {
    try {
      // 请求麦克风媒体流，对应原dart:html的navigator.mediaDevices.getUserMedia
      _audioStream = await web.navigator.mediaDevices.getUserMedia({
        'audio': {'echoCancellation': true},
        'video': false,
      });

      // 创建MediaRecorder实例，指定输出格式
      _recorder = web.MediaRecorder(_audioStream!);

      // 监听录制数据分片
      _recorder!.ondataavailable = (web.BlobEvent event) {
        if (event.data != null && event.data!.size > 0) {
          _recordedChunks.add(event.data!);
        }
      };

      // 监听录制结束事件
      _recorder!.onstop = (_) {
        final audioBlob = web.Blob(_recordedChunks, {'type': 'audio/webm'});
        final audioUrl = web.URL.createObjectURL(audioBlob);
        // 此处可根据需求处理音频URL：播放、上传或下载
        print('录音完成，音频URL：$audioUrl');
      };

      // 开始录制，每100ms生成一个数据分片（可选参数）
      _recorder!.start(100);
      print('已开始录音');
    } catch (err) {
      print('录音初始化失败：$err');
    }
  }

  // 停止录音并释放资源
  void stop() {
    if (_recorder?.state == 'recording') {
      _recorder?.stop();
      _audioStream?.getTracks().forEach((track) => track.stop());
      print('已停止录音');
    }
  }

  // 下载录制好的音频文件
  void download() {
    if (_recordedChunks.isEmpty) return;
    final audioBlob = web.Blob(_recordedChunks, {'type': 'audio/webm'});
    final downloadUrl = web.URL.createObjectURL(audioBlob);
    final link = web.document.createElement('a') as web.HTMLAnchorElement;
    link.href = downloadUrl;
    link.download = 'my_recording.webm';
    link.click();
    web.URL.revokeObjectURL(downloadUrl);
  }
}

3. 关键注意事项 #

• 权限限制：仅支持HTTPS环境（本地localhost开发除外），否则浏览器会拒绝麦克风权限请求。
• 格式兼容性：audio/webm是现代浏览器通用的格式，若需兼容更多场景，可尝试audio/ogg或audio/wav。
• 资源释放：停止录音后必须调用track.stop()释放媒体流，避免麦克风被持续占用。
• 事件监听差异：package:web通过直接赋值回调属性（如ondataavailable）绑定事件，而非dart:html的addEventListener写法。

与原 dart:html 代码的核心差异 #

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