Flutter音频波形展示插件waveform_flutter的使用
Flutter音频波形展示插件waveform_flutter的使用
WaveForm
WaveForm 是一个Flutter包,它可以帮助你在Flutter应用中构建动画波形。随着基于语音的聊天UI的流行,WaveForm提供了一种简单而有效的方法来可视化音频波形。受WaveSurfer.js启发,WaveForm提供了许多功能,可以将美丽且实用的波形集成到你的Flutter应用程序中。
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
更多关于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.dart
或home_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路径。