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

发布于 1周前 作者 htzhanglong 来自 Flutter

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

WaveForm

WaveForm Logo

WaveForm 是一个Flutter包,它可以帮助你在Flutter应用中构建动画波形。随着基于语音的聊天UI的流行,WaveForm提供了一种简单而有效的方法来可视化音频波形。受WaveSurfer.js启发,WaveForm提供了许多功能,可以将美丽且实用的波形集成到你的Flutter应用程序中。

Demo

Features

  • Stream-based Waveform Generation: 从幅度数据流创建实时波形。
  • Customizable Bars: 调整波形条的颜色和最大高度等外观属性。
  • Animated Lists: 使用动画列表平滑显示新的波形数据。
  • Flexible Integration: 与Flutter其他小部件和其他包轻松集成。

Important 🚨

请注意,此包不提供与音频源(如麦克风)的连接。建议使用record包将此包连接到音频流。

Installation

pubspec.yaml文件中添加以下内容:

dependencies:
  waveform: latest_version

然后运行flutter pub get以安装该包。

Usage

Basic Example

以下是使用WaveForm显示动画波形的示例:

import 'package:flutter/material.dart';
import 'package:waveform_flutter/waveform_flutter.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WaveForm Example')),
        body: WaveFormExample(),
      ),
    );
  }
}

class WaveFormExample extends StatefulWidget {
  const WaveFormExample({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _WaveFormExampleState createState() => _WaveFormExampleState();
}

class _WaveFormExampleState extends State<WaveFormExample> {
  final Stream<Amplitude> _amplitudeStream = createRandomAmplitudeStream();

  @override
  Widget build(BuildContext context) {
    return AnimatedWaveList(
      stream: _amplitudeStream,
      barBuilder: (animation, amplitude) => WaveFormBar(
        animation: animation,
        amplitude: amplitude,
        color: Colors.red, // override the default of cyan
      ),
    );
  }
}

Components

AnimatedWaveList

根据幅度值流显示动画波形条列表。

const AnimatedWaveList({
  required Stream<Amplitude> stream,
});

WaveformBar

表示波形可视化中的单个条。

const WaveFormBar({
  required Amplitude amplitude,
  Animation<double>? animation,
  int maxHeight = 2,
  Color color = Colors.cyan,
});

Helpers

createRandomAmplitudeStream

创建随机幅度值流。

Stream<Amplitude> createRandomAmplitudeStream() {
  return Stream.periodic(
    const Duration(milliseconds: 70),
    (count) => Amplitude(
      current: Random().nextDouble() * 100,
      max: 100,
    ),
  );
}

Contributing

欢迎贡献!请在GitHub上提交问题或拉取请求。

License

WaveForm根据MIT许可证授权。详情参见LICENSE文件。

Credits

WaveForm受到WaveSurfer.js的启发。


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

1 回复

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


当然,以下是如何在Flutter项目中使用waveform_flutter插件来展示音频波形的详细代码示例。

首先,确保你已经在你的Flutter项目中添加了waveform_flutter依赖。打开你的pubspec.yaml文件,并添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  waveform_flutter: ^最新版本号  # 请替换为实际最新版本号

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

接下来,我们编写代码来展示音频波形。这里我们假设你有一个音频文件的URL或本地路径。

1. 导入必要的包

在你的Dart文件中(通常是main.darthome_screen.dart),首先导入必要的包:

import 'package:flutter/material.dart';
import 'package:waveform_flutter/waveform_flutter.dart';

2. 创建音频波形组件

接下来,创建一个Widget来展示音频波形。假设你有一个音频文件的URL:

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

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  final String audioUrl = 'https://example.com/path/to/your/audiofile.mp3';  // 替换为你的音频文件URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform Example'),
      ),
      body: Center(
        child: AudioWaveform(
          audioSource: AudioSource.network(audioUrl),
          waveformColor: Colors.blue,
          backgroundColor: Colors.grey[200],
          height: 200,
          progressColor: Colors.red,
          // 其他可选参数
        ),
      ),
    );
  }
}

3. 使用本地音频文件

如果你有一个本地音频文件,可以使用AudioSource.asset来加载它:

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

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  final String audioAsset = 'assets/audio/your_audiofile.mp3';  // 确保音频文件已添加到assets目录中

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform Example'),
      ),
      body: Center(
        child: AudioWaveform(
          audioSource: AudioSource.asset(audioAsset),
          waveformColor: Colors.blue,
          backgroundColor: Colors.grey[200],
          height: 200,
          progressColor: Colors.red,
          // 其他可选参数
        ),
      ),
    );
  }
}

4. 完整示例

最后,将上述组件添加到你的应用中。例如,在main.dart中:

import 'package:flutter/material.dart';
import 'package:waveform_flutter/waveform_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Audio Waveform Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AudioWaveformScreen(),
    );
  }
}

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

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  final String audioUrl = 'https://example.com/path/to/your/audiofile.mp3';  // 替换为你的音频文件URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform Example'),
      ),
      body: Center(
        child: AudioWaveform(
          audioSource: AudioSource.network(audioUrl),
          waveformColor: Colors.blue,
          backgroundColor: Colors.grey[200],
          height: 200,
          progressColor: Colors.red,
          // 其他可选参数
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中使用waveform_flutter插件来展示音频波形。你可以根据需要调整颜色、高度和其他参数。确保你已经将音频文件添加到项目中(如果是本地文件),并在pubspec.yaml中正确配置了assets路径。

回到顶部