Innovare Audio Waveform Player
A customizable audio waveform player widget for Flutter with animated transitions, play-pulse effects, and dynamic theming.
Features
- π΅ Interactive Waveform Visualization - Tap or drag to seek through audio
- βΆοΈ Play/Pause Controls - With animated pulse effects
- β‘ Speed Control - Toggle between 1.0x, 1.5x, and 2.0x playback speeds
- π¨ Customizable Theming - Colors, gradients, and dimensions
- π± Responsive Design - Adapts to different screen sizes
- β±οΈ Progress Tracking - Visual and time-based progress indicators
- π Cross-Platform - Works on Android, iOS, Web, macOS, Windows, and Linux
Preview
Installation
Add this to your package's pubspec.yaml
file:
dependencies:
innovare_audio_waveform_player: ^1.0.0
Then run:
flutter pub get
Usage
Basic Usage
import 'package:innovare_audio_waveform_player/innovare_audio_waveform_player.dart';
InnovareAudioWaveformPlayer(
uri: 'https://example.com/audio.mp3',
waveform: [0.1, 0.3, 0.7, 0.4, 0.8, 0.2, 0.9],
)
Advanced Usage
InnovareAudioWaveformPlayer(
uri: 'https://example.com/audio.mp3',
waveform: [0.1, 0.3, 0.7, 0.4, 0.8, 0.2, 0.9],
height: 40,
accentColor: Colors.blue,
backgroundColor: Colors.grey.shade900,
playedWaveformGradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
)
Custom Theming Example
InnovareAudioWaveformPlayer(
uri: 'assets/audio/sample.mp3',
waveform: waveformData,
height: 50,
accentColor: Colors.green,
backgroundColor: const Color(0xFF1A1A2E),
playedWaveformGradient: const LinearGradient(
colors: [Colors.green, Colors.teal, Colors.blue],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
)
Parameters
Parameter | Type | Default | Description |
---|---|---|---|
uri |
String |
required | Audio file URI (URL or asset path) |
waveform |
List<double> |
required | Normalized waveform amplitudes (0.0 to 1.0) |
height |
double |
30 |
Height of the waveform visualization |
accentColor |
Color |
Colors.blueAccent |
Primary accent color for the player |
backgroundColor |
Color |
Color(0xFF1C1C1E) |
Background color of the player container |
playedWaveformGradient |
Gradient? |
null |
Optional gradient for the played portion |
Generating Waveform Data
The widget requires waveform data as a list of normalized amplitudes. Here are some approaches to generate this data:
1. Audio Analysis Libraries
You can use audio processing libraries to extract waveform data:
// Example with audio analysis
Future<List<double>> generateWaveform(String audioPath) async {
// Use libraries like 'fftea', 'flutter_audio_waveforms', etc.
// This is a simplified example
return [0.1, 0.3, 0.7, 0.4, 0.8, 0.2, 0.9, 0.6, 0.3, 0.5];
}
2. Pre-computed Data
For better performance, pre-compute waveform data on your server:
// Load pre-computed waveform from API
Future<List<double>> loadWaveform(String audioId) async {
final response = await http.get(Uri.parse('https://api.example.com/waveform/$audioId'));
final data = json.decode(response.body);
return List<double>.from(data['waveform']);
}
3. Static Sample Data
For testing or demo purposes:
static const demoWaveform = [
0.1, 0.3, 0.7, 0.4, 0.8, 0.2, 0.9, 0.6, 0.3, 0.5,
0.8, 0.4, 0.7, 0.9, 0.2, 0.6, 0.4, 0.8, 0.3, 0.7,
0.5, 0.9, 0.1, 0.6, 0.8, 0.3, 0.7, 0.4, 0.9, 0.2,
];
Platform Support
Platform | Support |
---|---|
Android | β |
iOS | β |
Web | β |
macOS | β |
Windows | β |
Linux | β |
Dependencies
This package depends on:
just_audio
for audio playbackflutter/material.dart
for UI components
Example
Check out the example directory for a complete demo application showing various configurations and use cases.
To run the example:
cd example
flutter run
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
Development Setup
- Clone the repository
- Install dependencies:
flutter pub get
- Run tests:
flutter test
- Run the example:
cd example && flutter run
License
This project is licensed under the MIT License - see the LICENSE file for details.
Changelog
See CHANGELOG.md for a detailed list of changes.
Support
If you find this package helpful, please give it a β on GitHub and a π on pub.flutter-io.cn!
For issues and feature requests, please use the GitHub Issues page.