How to Create Custom Audio Editing Experiences in FlutterFlow

1import 'package:audio_waveforms/audio_waveforms.dart';
2import 'package:ffmpeg_kit_flutter/ffmpeg_kit.dart';
3import 'package:path_provider/path_provider.dart';
4
5class AudioWaveformEditor extends StatefulWidget {
6  const AudioWaveformEditor({
7    super.key, this.width, this.height,
8    required this.audioFilePath,
9    this.onTrimComplete,
10  });
11  final double? width;
12  final double? height;
13  final String audioFilePath;
14  final Future Function(String trimmedPath)? onTrimComplete;
15
16  @override
17  State<AudioWaveformEditor> createState() => _State();
18}
19
20class _State extends State<AudioWaveformEditor> {
21  late final PlayerController _ctrl;
22  double _trimStart = 0.0;
23  double _trimEnd = 1.0;
24  int _durationMs = 0;
25  bool _exporting = false;
26
27  @override
28  void initState() {
29    super.initState();
30    _ctrl = PlayerController();
31    _ctrl.preparePlayer(
32      path: widget.audioFilePath,
33      shouldExtractWaveform: true,
34    ).then((_) {
35      _durationMs = _ctrl.maxDuration;
36      setState(() {});
37    });
38  }
39
40  Future<void> _preview() async {
41    final startMs = (_trimStart * _durationMs).round();
42    await _ctrl.seekTo(startMs);
43    _ctrl.startPlayer();
44    // Stop at trim end after delay
45    final playMs = ((_trimEnd - _trimStart) * _durationMs).round();
46    Future.delayed(Duration(milliseconds: playMs), () => _ctrl.pausePlayer());
47  }
48
49  Future<void> _export() async {
50    setState(() => _exporting = true);
51    final startSec = (_trimStart * _durationMs / 1000).toStringAsFixed(2);
52    final endSec = (_trimEnd * _durationMs / 1000).toStringAsFixed(2);
53    final dir = await getTemporaryDirectory();
54    final out = '${dir.path}/trim_${DateTime.now().millisecondsSinceEpoch}.m4a';
55    await FFmpegKit.execute(
56      '-i "${widget.audioFilePath}" -ss $startSec -to $endSec -c copy "$out"',
57    );
58    setState(() => _exporting = false);
59    widget.onTrimComplete?.call(out);
60  }
61
62  @override
63  void dispose() {
64    _ctrl.dispose();
65    super.dispose();
66  }
67
68  @override
69  Widget build(BuildContext context) {
70    final w = widget.width ?? 300;
71    return SizedBox(
72      width: w, height: widget.height ?? 180,
73      child: Column(children: [
74        Expanded(
75          child: Stack(children: [
76            AudioFileWaveforms(playerController: _ctrl, size: Size(w, 100)),
77            // Left trim region (dimmed)
78            Positioned(left: 0, width: _trimStart * w, top: 0, bottom: 0,
79              child: Container(color: Colors.black38)),
80            // Right trim region (dimmed)
81            Positioned(left: _trimEnd * w, right: 0, top: 0, bottom: 0,
82              child: Container(color: Colors.black38)),
83            // Left handle
84            Positioned(left: _trimStart * w - 4, top: 0, bottom: 0,
85              child: GestureDetector(
86                onHorizontalDragUpdate: (d) => setState(() {
87                  _trimStart = ((_trimStart + d.delta.dx / w)).clamp(0.0, _trimEnd - 0.05);
88                }),
89                child: Container(width: 8, color: Theme.of(context).primaryColor),
90              )),
91            // Right handle
92            Positioned(left: _trimEnd * w - 4, top: 0, bottom: 0,
93              child: GestureDetector(
94                onHorizontalDragUpdate: (d) => setState(() {
95                  _trimEnd = ((_trimEnd + d.delta.dx / w)).clamp(_trimStart + 0.05, 1.0);
96                }),
97                child: Container(width: 8, color: Theme.of(context).primaryColor),
98              )),
99          ]),
100        ),
101        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
102          IconButton(icon: const Icon(Icons.play_arrow), onPressed: _preview),
103          _exporting
104            ? const SizedBox(width: 24, height: 24, child: CircularProgressIndicator(strokeWidth: 2))
105            : IconButton(icon: const Icon(Icons.content_cut), onPressed: _export),
106        ]),
107      ]),
108    );
109  }
110}