Flutter音频可视化插件 audio_visualizer 的使用

audio_visualizer 是一个用于在Flutter应用中无缝可视化音频的插件。它支持从文件、资源、HTTP流、麦克风输入和原始PCM16数据中获取音频并进行可视化。

特性

• Visualize File：支持从本地文件加载音频
• Visualize Asset：支持从Flutter资产文件中加载音频
• Visualize HTTP：支持从网络URL加载音频
• Visualize Microphone：支持从麦克风输入音频（需配合其他插件使用）
• Visualize Raw PCM16：支持从原始PCM16数据中加载音频

组件概述

该插件提供了三个主要组件：

1. VisualizerPlayer：用于从文件、资源和HTTP流中加载并播放音频。
2. PCMVisualizer：用于从自定义源加载并处理原始PCM16数据。

预构建的可视化样式和波段类型

预构建的可视化样式

• BarVisualizer
• CircleVisualizer
• LineVisualizer
• MultiWaveVisualizer
• RainbowBlockVisualizer

波段类型

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

如何使用

从音频文件中可视化

你可以通过以下前缀来加载音频：

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

示例代码

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    initAudioPlayer();
  }

  Future<void> initAudioPlayer() async {
    await audioPlayer.initialize();
    await audioPlayer.setDataSource("asset://assets/sample.mp3");
    await audioPlayer.play();
  }

  [@override](/user/override)
  void dispose() {
    audioPlayer.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Audio Visualizer Demo'),
        ),
        body: Center(
          child: ListenableBuilder(
            listenable: audioPlayer,
            builder: (context, child) {
              return BarVisualizer(
                input: audioPlayer.value.waveform,
                backgroundColor: Colors.black,
                color: Colors.greenAccent,
                gap: 2,
              );
            },
          ),
        ),
      ),
    );
  }
}

可视化麦克风输入

要从麦克风输入音频，可以结合 record 插件使用。首先捕获音频数据，然后将其传递给 PCMVisualizer。

示例代码

import 'package:audio_visualizer/audio_visualizer.dart';
import 'package:flutter/material.dart';
// 假设你已经添加了 record 插件，并且导入了相关包

final pcmVisualizer = PCMVisualizer();

// 在捕获到音频数据后调用
pcmVisualizer.feed(rawPCM16Data);

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ListenableBuilder(
        listenable: pcmVisualizer,
        builder: (context, child) {
          return BarVisualizer(
            input: pcmVisualizer.value.waveform,
            backgroundColor: Colors.black,
            color: Colors.greenAccent,
            gap: 2,
          );
        },
      ),
    ),
  );
}

[@override](/user/override)
void dispose() {
  pcmVisualizer.dispose();
  super.dispose();
}

权限

在Android上，需要以下权限来可视化音频：

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

完整示例Demo

以下是一个完整的示例项目，展示了如何使用 audio_visualizer 插件来实现音频可视化功能。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _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](/user/override)
  void initState() {
    super.initState();
    audioPlayer.initialize().then((_) {
      audioPlayer.setDataSource(sources[sourceIndex]);
      audioPlayer.addListener(onUpdate);
    });
  }

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

  [@override](/user/override)
  void dispose() {
    audioPlayer.removeListener(onUpdate);
    audioPlayer.dispose();
    super.dispose();
  }

  [@override](/user/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 RainbowBlockVisualizer(
                  data: data,
                  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";
  }
}