flutter如何实现录音并显示波形

在Flutter中如何实现录音功能并实时显示音频波形？目前我尝试使用mic_stream和audioplayers库可以录音，但不知道如何将音频数据转换成可视化的波形图。请问有没有推荐的库或实现方案？最好能提供一个简单的代码示例，展示如何从麦克风获取数据并渲染成动态波形效果。

2 回复

使用Flutter实现录音和波形显示，可借助flutter_sound库录音，结合audioplayers播放。波形可通过flutter_audio_waveforms库实时绘制。录音时获取音频数据，转换为波形数据并更新UI。

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


在Flutter中实现录音并显示波形，可以通过以下步骤完成：

1. 添加依赖

在 pubspec.yaml 中添加录音和绘制相关的依赖：

dependencies:
  flutter_sound: ^X.X.X  # 用于录音
  path_provider: ^X.X.X  # 获取存储路径
  synchronized: ^X.X.X   # 可选，用于同步处理

2. 录音实现

使用 flutter_sound 录制音频并实时获取振幅数据：

import 'package:flutter_sound/flutter_sound.dart';

FlutterSoundRecorder? _recorder;
bool _isRecording = false;
List<double> amplitudes = []; // 存储振幅数据

void initRecorder() async {
  _recorder = FlutterSoundRecorder();
  await _recorder!.openAudioSession();
}

void startRecording() async {
  await _recorder!.startRecorder(
    toFile: 'audio.aac',
    codec: Codec.aacADTS,
  );
  _isRecording = true;
  
  // 实时获取振幅（示例间隔100ms）
  Timer.periodic(Duration(milliseconds: 100), (timer) async {
    if (!_isRecording) {
      timer.cancel();
      return;
    }
    double? amplitude = await _recorder!.getAmplitude();
    if (amplitude != null) {
      setState(() {
        amplitudes.add(amplitude.current);
      });
    }
  });
}

void stopRecording() async {
  await _recorder!.stopRecorder();
  _isRecording = false;
}

3. 波形显示

使用 CustomPaint 绘制波形图：

class WaveformPainter extends CustomPainter {
  final List<double> amplitudes;
  
  WaveformPainter(this.amplitudes);
  
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;
    
    if (amplitudes.isEmpty) return;
    
    final path = Path();
    final xStep = size.width / amplitudes.length;
    
    for (int i = 0; i < amplitudes.length; i++) {
      double x = i * xStep;
      // 将振幅映射到画布高度（示例映射逻辑）
      double y = size.height / 2 - (amplitudes[i] * size.height / 2 / 100);
      
      if (i == 0) {
        path.moveTo(x, y);
      } else {
        path.lineTo(x, y);
      }
    }
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

4. 在UI中使用

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 波形显示区域
      Container(
        height: 150,
        child: CustomPaint(
          painter: WaveformPainter(amplitudes),
        ),
      ),
      // 录音控制按钮
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _isRecording ? stopRecording : startRecording,
            child: Text(_isRecording ? '停止' : '开始'),
          ),
        ],
      ),
    ],
  );
}

注意事项：

  1. 需要处理录音权限（使用 permission_handler 包）
  2. 振幅数据可能需要归一化处理以适应显示
  3. 实时绘制时注意性能优化，可限制数据点数量
  4. 实际振幅值范围需根据设备调整映射逻辑

以上代码提供了基础实现框架，可根据实际需求调整波形样式和数据处理逻辑。

回到顶部