Building an Audio Visualizer in Flutter

Eittipat.K — Sun, 01 Dec 2024 13:59:59 +0000

Creating an engaging audio visualizer enhances the interactivity of any app. This guide will walk you through building a retro arcade-style rainbow visualizer using Flutter and the audio_visualizer package.

Preview

Below is a sneak peek of the final output:

Step 1: Setting Up the Visualizer

We start by creating a RainbowBlockVisualizer widget. This widget will dynamically render audio blocks based on FFT (Fast Fourier Transform) data. Here's the implementation:

RainbowBlockVisualizer Widget

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

class RainbowBlockVisualizer extends StatelessWidget {
  final List<int> data;
  final int maxSample;
  final double blockHeight;
  final double blockSpacing;

  const RainbowBlockVisualizer({
    super.key,
    this.data = const [],
    this.maxSample = 32,
    this.blockHeight = 8,
    this.blockSpacing = 1,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: AudioBlockPainter(
        data: data,
        blockHeight: blockHeight,
        blockSpacing: blockSpacing,
        maxSample: maxSample,
      ),
      size: Size.infinite,
    );
  }
}

Custom Painter for Audio Blocks

class AudioBlockPainter extends CustomPainter {
  final List<int> data;
  final double blockHeight;
  final double blockSpacing;
  final int maxSample;

  AudioBlockPainter({
    required this.data,
    required this.blockHeight,
    required this.blockSpacing,
    required this.maxSample,
  });

  int get dataLength => min(maxSample, data.length);

  int getNumBlocks(int audioValue) {
    return (audioValue / 255 * 32).round().clamp(1, 32);
  }

  Color getBlockColor(int barIndex, int blockIndex, int maxBlocks) {
    final hue = (barIndex / dataLength) * 360;
    const lightnessRange = 0.1;
    final lightness = 0.6 +
        (blockIndex / maxBlocks * lightnessRange).clamp(0.0, lightnessRange);
    return HSLColor.fromAHSL(1, hue, 0.8, lightness).toColor();
  }

  @override
  void paint(Canvas canvas, Size size) {
    if (data.isEmpty) return;

    final barWidth = size.width / dataLength;

    for (int i = 0; i < dataLength; i++) {
      final numBlocks = getNumBlocks(data[i]);
      final barX = i * barWidth;

      for (int j = 0; j < numBlocks; j++) {
        final paint = Paint()..color = getBlockColor(i, j, numBlocks);

        final blockY = size.height - ((j + 1) * (blockHeight + blockSpacing));

        final rect = RRect.fromRectAndRadius(
          Rect.fromLTWH(
            barX + blockSpacing / 2,
            blockY,
            barWidth - blockSpacing,
            blockHeight,
          ),
          const Radius.circular(2),
        );
        canvas.drawRRect(rect, paint);

        final highlightPaint = Paint()
          ..color = Colors.white.withOpacity(0.2)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
        canvas.drawLine(
          Offset(rect.left, rect.top),
          Offset(rect.right, rect.top),
          highlightPaint,
        );
        canvas.drawLine(
          Offset(rect.left, rect.top),
          Offset(rect.left, rect.bottom),
          highlightPaint,
        );

        final shadowPaint = Paint()
          ..color = Colors.black.withOpacity(0.2)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
        canvas.drawLine(
          Offset(rect.right, rect.top),
          Offset(rect.right, rect.bottom),
          shadowPaint,
        );
        canvas.drawLine(
          Offset(rect.left, rect.bottom),
          Offset(rect.right, rect.bottom),
          shadowPaint,
        );
      }
    }
  }

  @override
  bool shouldRepaint(AudioBlockPainter oldDelegate) {
    return data != oldDelegate.data ||
        blockHeight != oldDelegate.blockHeight ||
        blockSpacing != oldDelegate.blockSpacing;
  }
}

Step 2: Creating the Main Application

Main Function

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'rainbow_visualizer.dart';

void main() {
  runApp(MaterialApp(
    themeMode: ThemeMode.dark,
    darkTheme: ThemeData.dark(useMaterial3: true),
    home: const MyApp(),
  ));
}

MyApp Widget


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

  @override
  State<MyApp> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  final audioPlayer = VisualizerPlayer();

  final sources = [
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
    "https://files.testfile.org/AUDIO/C/M4A/sample1.m4a",
  ];
  var sourceIndex = 0;

  @override
  void initState() {
    super.initState();
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    audioPlayer.initialize();
    audioPlayer.setDataSource(sources[sourceIndex]);
    audioPlayer.addListener(onUpdate);
  }

  void onUpdate() {
    if (audioPlayer.value.status == PlayerStatus.ready) {
      audioPlayer.play(looping: true);
    }
  }

  @override
  void dispose() {
    audioPlayer.removeListener(onUpdate);
    audioPlayer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(
          child: Text('Audio Visualizer'),
        ),
      ),
      body: Column(
        children: [
          const SizedBox(height: 32),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListenableBuilder(
              listenable: audioPlayer,
              builder: (context, child) {
                final duration = audioPlayer.value.duration;
                final position = audioPlayer.value.position;
                final durationText = formatDuration(duration);
                final positionText = formatDuration(position);
                return Text(
                  "$positionText / $durationText",
                  style: Theme.of(context).textTheme.headlineLarge,
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListenableBuilder(
              listenable: audioPlayer,
              builder: (context, child) {
                return Text(
                  audioPlayer.value.status == PlayerStatus.playing
                      ? "Now Playing"
                      : "",
                  style: Theme.of(context).textTheme.bodyLarge,
                );
              },
            ),
          ),
          Expanded(
            child: ListenableBuilder(
              listenable: audioPlayer,
              builder: (context, child) {
                final data = getMagnitudes(audioPlayer.value.fft);
                return AudioSpectrum(
                  fftMagnitudes: data,
                  bandType: BandType.tenBand,
                  builder: (context, value, child) {
                    return RainbowBlockVisualizer(
                      data: value.levels,
                      maxSample: 32,
                      blockHeight: 14,
                    );
                  },
                );
              },
            ),
          ),
          ListenableBuilder(
            listenable: audioPlayer,
            builder: (context, child) {
              final duration = audioPlayer.value.duration.inMilliseconds;
              final position = audioPlayer.value.position.inMilliseconds;
              return LinearProgressIndicator(
                value: position / max(1, duration),
                minHeight: 8,
              );
            },
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: const Icon(Icons.play_arrow),
              onPressed: () {
                audioPlayer.play(looping: true);
              },
            ),
            IconButton(
              icon: const Icon(Icons.pause),
              onPressed: () {
                audioPlayer.pause();
              },
            ),
            IconButton(
              icon: const Icon(Icons.stop),
              onPressed: () {
                audioPlayer.stop();
              },
            ),
            IconButton(
              icon: const Icon(Icons.loop),
              onPressed: () {
                sourceIndex = (sourceIndex + 1) % sources.length;
                audioPlayer.stop();
                audioPlayer.setDataSource(sources[sourceIndex]);
              },
            ),
          ],
        ),
      ),
    );
  }
}

String formatDuration(Duration duration) {
  final minutes = duration.inMinutes;
  final seconds = duration.inSeconds.remainder(60).toString().padLeft(2, '0');
  return "$minutes:$seconds";
}

Final Notes

This app integrates the audio_visualizer package to transform FFT data into a visually appealing audio spectrum. Experiment with different colors, block sizes, and spacing for unique designs!

DEV Community: Eittipat.K