audio_visualizer 1.0.2 copy "audio_visualizer: ^1.0.2" to clipboard
audio_visualizer: ^1.0.2 copied to clipboard

Audio visualizer for Android and iOS

🎵 Audio Visualizer #

A Flutter package for seamlessly visualizing audio from files, assets, HTTP streams, microphone input, and raw PCM16 data.

Explore all usage examples in the example directory.

Demo App


✨ Features #

Feature Android iOS
Visualize File
Visualize Asset
Visualize HTTP
Visualize Microphone
Visualize Raw PCM16

📦 Components Overview #

This package provides three major components:

  1. VisualizerPlayer
    For visualizing audio from files, assets, and HTTP streams.

  2. PCMVisualizer
    For visualizing raw PCM16 data from custom sources.

  3. VisualizerBuilder
    A widget to build and customize visualizers.


🚀 Visualizer Styles and Bands #

Pre-built Visualizer Styles #

Elevate your app's aesthetic with four stunning, ready-to-use visualizer widgets:

  • BarVisualizer
  • CircleVisualizer
  • LineVisualizer
  • MultiWaveVisualizer

Band Types #

Choose from six band types to suit your visualization needs:

  • fourBand
  • fourBandVisual
  • eightBand
  • tenBand
  • twentySixBand
  • thirtyOneBand

🎧 How to Use #

Visualizing an Audio File #

Load audio using the appropriate prefix:

  • Assets: asset://path_to_asset
  • Files: file://path_to_file
  • HTTP: http://url or https://url

Example:

// Initialize VisualizerPlayer
final audioPlayer = VisualizerPlayer();
await audioPlayer.initialize();
await audioPlayer.setDataSource("asset://assets/sample.mp3");
await audioPlayer.play();

// Visualize with BarVisualizer
VisualizerBuilder(
  controller: audioPlayer,
  builder: (context, value, child) {
    return BarVisualizer(
      input: value.levels,
      color: Colors.yellow,
      backgroundColor: Colors.black,
      gap: 2,
    );
  },
);

// Dispose VisualizerPlayer
audioPlayer.dispose();

Visualizing Microphone Input #

This package does not directly handle microphone input. You can use the record package to capture audio and feed it into the visualizer.

Example:

// Initialize PCMVisualizer
final pcmVisualizer = PCMVisualizer();
pcmVisualizer.feed(rawPCM16Data);

// Visualize with BarVisualizer
VisualizerBuilder(
  controller: pcmVisualizer,
  builder: (context, value, child) {
    return BarVisualizer(
      input: value.levels,
      color: Colors.yellow,
      backgroundColor: Colors.black,
      gap: 2,
    );
  },
);

// Dispose PCMVisualizer
pcmVisualizer.dispose();

⚙️ Permissions #

On Android, the following permission is required to visualize audio:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

🙏 Acknowledgements #

This project is inspired by and leverages ideas and code from the following:


50
likes
140
pub points
32%
popularity

Publisher

unverified uploader

Audio visualizer for Android and iOS

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

flutter, plugin_platform_interface

More

Packages that depend on audio_visualizer