Flutter音频波形展示插件flutter_ng_waveform的使用

Flutter音频波形展示插件flutter_ng_waveform的使用

flutter_ng_waveform简介

flutter_ng_waveform 是一个用于在 Flutter 应用程序中实现音频波形展示的插件。它支持多种功能，包括录音、播放、暂停、音频文件管理等，并且可以自定义波形视图。

使用步骤

1. 添加依赖

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

dependencies:
  flutter_ng_waveform: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 初始化插件

在应用程序的初始化阶段，需要调用插件的初始化方法来设置平台环境。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_ng_waveform/flutter_ng_waveform.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _flutterNgWaveformPlugin = FlutterNgWaveform();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 初始化插件状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await _flutterNgWaveformPlugin.getPlatformVersion() ??
          'Unknown platform version';
      await _flutterNgWaveformPlugin.initAudio(); // 初始化音频模块
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('音频波形展示示例'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('运行于: $_platformVersion\n'),
              TextButton(
                onPressed: () => _clickStartRecordAction(),
                child: const Text('开始录音'),
              ),
              TextButton(
                onPressed: () => _clickStopRecordAction(),
                child: const Text('停止录音'),
              ),
              TextButton(
                onPressed: () => _clickStartPlayAction(),
                child: const Text('播放录音'),
              ),
              TextButton(
                onPressed: () => _clickPausePlayAction(),
                child: const Text('暂停播放'),
              ),
              TextButton(
                onPressed: () => _clickAudioFilesAction(),
                child: const Text('录音列表'),
              ),
              TextButton(
                onPressed: () => _clickRenameAction(),
                child: const Text('重命名'),
              ),
              TextButton(
                onPressed: () => _clickDeleteAction(),
                child: const Text('删除文件'),
              ),
              Container(
                width: 300,
                height: 200,
                child: const UiKitView(viewType: 'waveformView'), // 波形视图
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 实现功能

开始录音

void _clickStartRecordAction() {
  _flutterNgWaveformPlugin.startRecord(); // 开始录音
}

停止录音

void _clickStopRecordAction() {
  _flutterNgWaveformPlugin.stopRecord(); // 停止录音
}

播放录音

void _clickStartPlayAction() {
  _flutterNgWaveformPlugin.startPlay(); // 开始播放
}

暂停播放

void _clickPausePlayAction() {
  _flutterNgWaveformPlugin.pausePlay(); // 暂停播放
}

获取录音文件列表

void _clickAudioFilesAction() async {
  List audios = await _flutterNgWaveformPlugin.audioFiles(); // 获取录音文件列表
  for (var element in audios) {
    print('--- 文件名: $element');
  }
}

重命名录音文件

void _clickRenameAction() async {
  print(await _flutterNgWaveformPlugin.audioFileRename(
      '20220824160856.m4a', 'modifiedName.m4a')); // 重命名录音文件
}

删除录音文件

void _clickDeleteAction() async {
  print(await _flutterNgWaveformPlugin.deleteAudioFile('20220824160721.m4a')); // 删除录音文件
}

4. 显示波形

通过 UiKitView 组件展示波形视图：

Container(
  width: 300,
  height: 200,
  child: const UiKitView(viewType: 'waveformView'), // 波形视图
),

完整示例代码

以下是完整的示例代码，包含所有功能：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_ng_waveform/flutter_ng_waveform.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _flutterNgWaveformPlugin = FlutterNgWaveform();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 初始化插件状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await _flutterNgWaveformPlugin.getPlatformVersion() ??
          'Unknown platform version';
      await _flutterNgWaveformPlugin.initAudio(); // 初始化音频模块
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('音频波形展示示例'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('运行于: $_platformVersion\n'),
              TextButton(
                onPressed: () => _clickStartRecordAction(),
                child: const Text('开始录音'),
              ),
              TextButton(
                onPressed: () => _clickStopRecordAction(),
                child: const Text('停止录音'),
              ),
              TextButton(
                onPressed: () => _clickStartPlayAction(),
                child: const Text('播放录音'),
              ),
              TextButton(
                onPressed: () => _clickPausePlayAction(),
                child: const Text('暂停播放'),
              ),
              TextButton(
                onPressed: () => _clickAudioFilesAction(),
                child: const Text('录音列表'),
              ),
              TextButton(
                onPressed: () => _clickRenameAction(),
                child: const Text('重命名'),
              ),
              TextButton(
                onPressed: () => _clickDeleteAction(),
                child: const Text('删除文件'),
              ),
              Container(
                width: 300,
                height: 200,
                child: const UiKitView(viewType: 'waveformView'), // 波形视图
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _clickStartRecordAction() {
    _flutterNgWaveformPlugin.startRecord(); // 开始录音
  }

  void _clickStopRecordAction() {
    _flutterNgWaveformPlugin.stopRecord(); // 停止录音
  }

  void _clickStartPlayAction() {
    _flutterNgWaveformPlugin.startPlay(); // 开始播放
  }

  void _clickPausePlayAction() {
    _flutterNgWaveformPlugin.pausePlay(); // 暂停播放
  }

  void _clickAudioFilesAction() async {
    List audios = await _flutterNgWaveformPlugin.audioFiles(); // 获取录音文件列表
    for (var element in audios) {
      print('--- 文件名: $element');
    }
  }

  void _clickRenameAction() async {
    print(await _flutterNgWaveformPlugin.audioFileRename(
        '20220824160856.m4a', 'modifiedName.m4a')); // 重命名录音文件
  }

  void _clickDeleteAction() async {
    print(await _flutterNgWaveformPlugin.deleteAudioFile('20220824160721.m4a')); // 删除录音文件
  }
}

更多关于Flutter音频波形展示插件flutter_ng_waveform的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音频波形展示插件flutter_ng_waveform的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_ng_waveform 是一个用于在 Flutter 应用中展示音频波形的插件。它可以帮助你从音频文件中生成波形，并以可视化的方式展示出来。以下是如何使用 flutter_ng_waveform 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_ng_waveform 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_ng_waveform: ^0.0.1 # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_ng_waveform 包：

import 'package:flutter_ng_waveform/flutter_ng_waveform.dart';

3. 使用 NgWaveform 组件

NgWaveform 是 flutter_ng_waveform 提供的主要组件，用于展示音频波形。你可以通过以下方式使用它：

class AudioWaveformScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform'),
      ),
      body: Center(
        child: NgWaveform(
          // 音频文件路径
          audioPath: 'assets/audio/sample.mp3',
          // 波形图高度
          height: 100,
          // 波形图宽度
          width: MediaQuery.of(context).size.width,
          // 波形颜色
          waveformColor: Colors.blue,
          // 背景颜色
          backgroundColor: Colors.grey[200],
          // 是否显示播放进度
          showProgress: true,
          // 播放进度颜色
          progressColor: Colors.red,
        ),
      ),
    );
  }
}

4. 处理音频文件

NgWaveform 需要一个音频文件的路径来生成波形。你可以将音频文件放在 assets 文件夹中，并在 pubspec.yaml 中声明：

flutter:
  assets:
    - assets/audio/sample.mp3

5. 控制播放进度

如果你想在播放音频时动态更新波形图的进度，你可以通过 NgWaveformController 来控制：

class AudioWaveformScreen extends StatefulWidget {
  @override
  _AudioWaveformScreenState createState() => _AudioWaveformScreenState();
}

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  NgWaveformController _controller = NgWaveformController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform'),
      ),
      body: Column(
        children: [
          NgWaveform(
            audioPath: 'assets/audio/sample.mp3',
            height: 100,
            width: MediaQuery.of(context).size.width,
            waveformColor: Colors.blue,
            backgroundColor: Colors.grey[200],
            showProgress: true,
            progressColor: Colors.red,
            controller: _controller,
          ),
          ElevatedButton(
            onPressed: () {
              // 更新播放进度
              _controller.updateProgress(0.5); // 50% 进度
            },
            child: Text('Update Progress'),
          ),
        ],
      ),
    );
  }
}

6. 自定义波形样式

你可以通过调整 NgWaveform 的参数来自定义波形的样式，例如颜色、高度、宽度等。

7. 处理错误

在使用 NgWaveform 时，可能会遇到一些错误，例如音频文件无法加载或波形生成失败。你可以通过 onError 回调来处理这些错误：

NgWaveform(
  audioPath: 'assets/audio/sample.mp3',
  height: 100,
  width: MediaQuery.of(context).size.width,
  waveformColor: Colors.blue,
  backgroundColor: Colors.grey[200],
  showProgress: true,
  progressColor: Colors.red,
  onError: (error) {
    print('Waveform error: $error');
  },
);
回到顶部