flutter如何实现flutter_sound和audio_waveforms的音频波形显示

在Flutter中如何结合使用flutter_sound和audio_waveforms插件实现音频波形显示？我尝试用flutter_sound录制音频后，想通过audio_waveforms展示波形，但不知道如何将两者数据对接。具体问题是：

  1. flutter_sound录制的音频文件如何传递给audio_waveforms解析？
  2. 是否需要中间转换步骤，比如格式转换或文件路径处理？
  3. 实时录音时能否动态更新波形？如果有示例代码就更好了。
2 回复

使用Flutter实现音频波形显示，可结合flutter_sound录制音频，audio_waveforms绘制波形。步骤如下：

  1. 使用flutter_sound录制音频并保存文件。
  2. 通过audio_waveforms读取音频文件，生成波形数据。
  3. 使用Waveform或LiveWaveform组件显示波形。

示例代码：

final recorder = FlutterSoundRecorder();
final waveController = AudioWaveformsController();

// 开始录制
await recorder.startRecorder(toFile: 'audio.aac');

// 显示波形
Waveform(
  controller: waveController,
  // 配置波形样式
);

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


在 Flutter 中结合 flutter_sound 录制音频，并使用 audio_waveforms 显示波形，可按以下步骤实现：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_sound: ^10.0.0
  audio_waveforms: ^3.0.0

2. 实现代码

import 'package:flutter/material.dart';
import 'package:flutter_sound/flutter_sound.dart';
import 'package:audio_waveforms/audio_waveforms.dart';

class AudioRecorderScreen extends StatefulWidget {
  @override
  _AudioRecorderScreenState createState() => _AudioRecorderScreenState();
}

class _AudioRecorderScreenState extends State<AudioRecorderScreen> {
  final FlutterSoundRecorder _recorder = FlutterSoundRecorder();
  final WaveController _waveController = WaveController();
  bool _isRecording = false;
  String? _filePath;

  @override
  void initState() {
    super.initState();
    _initRecorder();
  }

  Future<void> _initRecorder() async {
    await _recorder.openRecorder();
    await _recorder.setSubscriptionDuration(const Duration(milliseconds: 100));
  }

  Future<void> _startRecording() async {
    final path = '/path/to/save/audio.wav'; // 设置实际存储路径
    await _recorder.startRecorder(toFile: path);
    _waveController.prepareInput(sampleRate: 16000); // 设置采样率
    setState(() {
      _isRecording = true;
      _filePath = path;
    });
  }

  Future<void> _stopRecording() async {
    await _recorder.stopRecorder();
    _waveController.finish();
    setState(() => _isRecording = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AudioWaveforms(
            size: Size(MediaQuery.of(context).size.width, 100),
            waveController: _waveController,
            enableGesture: false,
            waveStyle: WaveStyle(
              waveColor: Colors.blue,
              showDurationLabel: false,
            ),
          ),
          ElevatedButton(
            onPressed: _isRecording ? _stopRecording : _startRecording,
            child: Text(_isRecording ? '停止录音' : '开始录音'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _recorder.closeRecorder();
    _waveController.dispose();
    super.dispose();
  }
}

关键说明：

  1. 权限配置：需要在 AndroidManifest.xml 和 Info.plist 中申请录音权限
  2. 路径设置：使用 path_provider 获取实际可用的存储路径
  3. 参数调整：根据音频特性调整 sampleRate 和波形样式
  4. 实时监听：可通过 _recorder.onProgress 获取实时音频数据并更新波形

注意事项：

  • 确保在真机上测试，模拟器可能无法正常录音
  • 不同采样率会影响波形显示精度
  • 需处理后台录制时的生命周期管理

此方案实现了录音时的实时波形显示，停止后波形会保留最终状态。

回到顶部