Flutter如何提取MP3并绘制声音进度图

在Flutter中如何从音频文件提取MP3数据，并实时绘制声音波形或进度图？目前需要实现一个功能，能够显示音频播放时的动态波形效果，但不太清楚该用什么库以及具体实现步骤。是否有推荐的插件或方法能同时处理音频解码和波形绘制？最好能提供简单的代码示例说明关键实现步骤。

2 回复

使用audioplayers播放MP3，audioprocessor处理音频数据。通过FFT获取频谱，用CustomPaint绘制波形或频谱图，结合Slider实现进度控制。

更多关于Flutter如何提取MP3并绘制声音进度图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中提取MP3并绘制声音进度图，可以通过以下步骤实现：

1. 提取MP3音频数据

使用 audioplayers 或 just_audio 库播放音频，结合 audio_service 管理播放状态。

推荐依赖：

dependencies:
  audioplayers: ^5.0.0
  just_audio: ^0.9.32
  audio_service: ^0.18.9

基本播放和进度监听（使用 just_audio）：

import 'package:just_audio/just_audio.dart';

final _player = AudioPlayer();

// 加载音频
await _player.setAudioSource(AudioSource.uri(Uri.parse("your_mp3_path")));

// 监听进度
_player.positionStream.listen((Duration position) {
  // 更新进度数据
  double progress = position.inMilliseconds / _player.duration.inMilliseconds;
  // 触发UI重绘
});

2. 绘制声音波形/进度图

使用 CustomPaint 和 CustomPainter 自定义绘制。

示例代码：

class AudioWaveformPainter extends CustomPainter {
  final double progress; // 0.0 到 1.0
  final List<double>? waveformData; // 音频波形数据（可选）

  AudioWaveformPainter({required this.progress, this.waveformData});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2;

    // 绘制进度条背景
    canvas.drawLine(Offset.zero, Offset(size.width, 0), paint..color = Colors.grey);

    // 绘制进度
    canvas.drawLine(Offset.zero, Offset(size.width * progress, 0), paint..color = Colors.blue);

    // 可选：绘制波形（需预先解析音频数据）
    if (waveformData != null) {
      for (int i = 0; i < waveformData!.length; i++) {
        double x = i * (size.width / waveformData!.length);
        double height = waveformData![i] * size.height;
        canvas.drawLine(
          Offset(x, size.height / 2 - height / 2),
          Offset(x, size.height / 2 + height / 2),
          paint..color = Colors.green,
        );
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

在UI中使用：

CustomPaint(
  painter: AudioWaveformPainter(progress: _currentProgress),
  size: Size(MediaQuery.of(context).size.width, 50),
)

3. 获取波形数据（高级）

如需真实波形，需使用 flutter_ffmpeg 或服务端预处理生成波形数据点列表。

注意事项：

  • 实时波形绘制需预先解析音频，计算量大，建议在后台处理。
  • 进度更新通过 StreamBuilder 或 ValueListenableBuilder 与UI同步。
  • 测试真实设备权限和文件路径访问。

以上方案可满足基本进度条和自定义波形显示需求。

回到顶部