flutter如何实现录音时实时绘制跳动的声浪图

在Flutter中如何实现录音时实时绘制跳动的声浪图？目前尝试使用audioplayers录制音频，但不知道如何获取实时的音量数据并同步更新UI。有没有成熟的方案或插件推荐？最好能提供关键代码示例，比如如何将音频振幅转换为动态波形图的效果。

2 回复

使用Flutter的audio_streamer或record库获取音频流数据，结合CustomPaint绘制波形。通过StreamBuilder实时更新数据，用Canvas绘制动态声浪图。

更多关于flutter如何实现录音时实时绘制跳动的声浪图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现录音时实时绘制声浪图，可以通过以下步骤完成：

1. 添加依赖

在 pubspec.yaml 中添加录音和权限依赖：

dependencies:
  flutter_sound: ^10.5.0  # 录音库
  permission_handler: ^11.0.1  # 权限处理

2. 请求录音权限

在录音前请求权限：

import 'package:permission_handler/permission_handler.dart';

Future<bool> requestPermission() async {
  final status = await Permission.microphone.request();
  return status.isGranted;
}

3. 录音并获取音频数据

使用 flutter_sound 开始录音，并通过 onProgress 回调获取实时振幅数据：

import 'package:flutter_sound/flutter_sound.dart';

final FlutterSoundRecorder _recorder = FlutterSoundRecorder();
List<double> amplitudes = []; // 存储振幅数据

void startRecording() async {
  await _recorder.openRecorder();
  await _recorder.startRecorder(
    toFile: 'path/to/file.aac',
    codec: Codec.aacADTS,
    onProgress: (duration) {
      // 获取当前振幅（示例值，实际需通过FFT计算）
      double amplitude = _recorder.getAmplitude()?.current ?? 0.0;
      amplitudes.add(amplitude);
      
      // 限制数据长度，避免内存溢出
      if (amplitudes.length > 100) amplitudes.removeAt(0);
      
      // 触发UI重绘
      if (mounted) setState(() {});
    },
  );
}

4. 自定义绘制声浪图

使用 CustomPaint 绘制动态声浪波形：

class SoundWavePainter extends CustomPainter {
  final List<double> amplitudes;
  
  SoundWavePainter(this.amplitudes);
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;
    
    final path = Path();
    final width = size.width;
    final height = size.height;
    
    if (amplitudes.isEmpty) return;
    
    // 计算每个数据点的x坐标间隔
    final xStep = width / amplitudes.length;
    
    path.moveTo(0, height / 2);
    
    for (int i = 0; i < amplitudes.length; i++) {
      // 将振幅映射到波形高度（可根据需要调整缩放系数）
      double y = height / 2 - amplitudes[i] * 10;
      path.lineTo(i * xStep, y);
    }
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

5. 在UI中使用

将绘制组件嵌入界面：

CustomPaint(
  size: Size(MediaQuery.of(context).size.width, 150),
  painter: SoundWavePainter(amplitudes),
)

注意事项：

  1. 实际振幅计算：getAmplitude() 返回的是分贝值，实际应用可能需要通过FFT计算频域数据
  2. 性能优化：数据量较大时可使用 CircularBuffer 或固定长度列表
  3. 波形平滑：可对数据进行插值或滤波处理
  4. 权限处理：iOS需要在 Info.plist 中添加麦克风使用说明

完整实现需要结合状态管理和异常处理，以上代码提供了核心实现思路。

回到顶部