Flutter音频裁剪插件animagie_audio_trimmer的使用

简介

animagie_audio_trimmer 是一个用于音频裁剪的 Flutter 插件。通过此插件，您可以轻松实现音频文件的剪切功能。本文将详细介绍如何使用该插件，并提供完整的示例代码。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 animagie_audio_trimmer 依赖：

dependencies:
  animagie_audio_trimmer: ^版本号

运行 flutter pub get 安装依赖。

2. 获取音频文件

首先，我们需要从设备中选择一个音频文件。可以使用 file_picker 插件来实现这一功能。

3. 音频裁剪界面

选择音频文件后，我们将跳转到一个专门用于音频裁剪的界面。在这个界面上，用户可以拖动滑块来选择音频的起始和结束位置。

示例代码

以下是一个完整的示例代码，展示如何使用 animagie_audio_trimmer 插件进行音频裁剪。

// example/lib/main.dart

import 'dart:io';

import 'package:example/audio_trimmer_view.dart'; // 自定义的音频裁剪视图
import 'package:file_picker/file_picker.dart'; // 用于选择文件
import 'package:flutter/material.dart'; // Flutter 基础库

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 构建应用根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Audio Trimmer', // 应用标题
      debugShowCheckedModeBanner: false, // 移除调试标志
      theme: ThemeData(
        primarySwatch: createMaterialColor(const Color.fromRGBO(251, 182, 45, 1)), // 自定义主题颜色
      ),
      home: const FileSelectorWidget(), // 跳转到文件选择页面
    );
  }
}

// 文件选择页面
class FileSelectorWidget extends StatefulWidget {
  const FileSelectorWidget({super.key});

  [@override](/user/override)
  State<FileSelectorWidget> createState() => _FileSelectorWidgetState();
}

class _FileSelectorWidgetState extends State<FileSelectorWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Audio Trimmer"), // 设置标题
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async { // 按钮点击事件
            FilePickerResult? result = await FilePicker.platform.pickFiles(
              type: FileType.audio, // 仅允许选择音频文件
              allowCompression: false, // 不压缩文件
            );
            if (result != null) {
              File file = File(result.files.single.path!); // 获取选中的文件
              // 跳转到音频裁剪页面
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) {
                  return AudioTrimmerView(file); // 传递文件对象
                }),
              );
            }
          },
          child: const Text("Select File"), // 按钮文本
        ),
      ),
    );
  }
}

// 创建自定义主题颜色
MaterialColor createMaterialColor(Color color) {
  List strengths = <double>[.05];
  Map<int, Color> swatch = {};
  final int r = color.red, g = color.green, b = color.blue;

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  for (var strength in strengths) {
    final double ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  }
  return MaterialColor(color.value, swatch);
}

自定义音频裁剪界面

在上面的代码中，我们调用了 AudioTrimmerView 来展示音频裁剪界面。以下是 AudioTrimmerView 的实现：

// example/lib/audio_trimmer_view.dart

import 'package:animagie_audio_trimmer/animagie_audio_trimmer.dart'; // 引入音频裁剪插件
import 'package:flutter/material.dart'; // Flutter 基础库

class AudioTrimmerView extends StatefulWidget {
  final File file; // 传入的音频文件

  const AudioTrimmerView(this.file, {Key? key}) : super(key: key);

  [@override](/user/override)
  _AudioTrimmerViewState createState() => _AudioTrimmerViewState();
}

class _AudioTrimmerViewState extends State<AudioTrimmerView> {
  late Trimmer _trimmer; // 初始化 Trimmer 对象
  bool _isPlaying = false; // 是否正在播放音频
  double _startValue = 0.0; // 开始时间
  double _endValue = 0.0; // 结束时间

  [@override](/user/override)
  void initState() {
    super.initState();
    _trimmer = Trimmer(); // 初始化 Trimmer
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Trim Audio"), // 设置标题
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: Trimmer(
                audioPath: widget.file.path, // 设置音频路径
                onPlayProgress: (value) { // 播放进度回调
                  setState(() {
                    _startValue = value.start;
                    _endValue = value.end;
                  });
                },
                onChangeEndValue: (value) { // 改变结束时间回调
                  setState(() {
                    _endValue = value;
                  });
                },
                onChangeStartValue: (value) { // 改变开始时间回调
                  setState(() {
                    _startValue = value;
                  });
                },
              ),
            ),
            ElevatedButton(
              onPressed: () async { // 裁剪音频按钮
                final trimmedFile = await _trimmer.saveTrimmedAudio(
                  startValue: _startValue,
                  endValue: _endValue,
                  outputPath: 'trimmed_audio.mp3', // 输出路径
                );
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Trimmed Audio Saved at $trimmedFile')),
                );
              },
              child: const Text("Trim Audio"), // 按钮文本
            ),
          ],
        ),
      ),
    );
  }
}