Flutterでリアルタイムに音声可視できるパッケージ「waveform_fft」

Flutterアプリで音声をリアルタイムで波形表示したいことはありませんか？
そんなときに活用できるのが waveform_fft パッケージです。FFT（高速フーリエ変換）を使用して、マイクからの音声をリアルタイムで可視化できます。

1. waveform_fftとは？

waveform_fft は、FFT（高速フーリエ変換）を使用してリアルタイム音声可視化を行うFlutterパッケージです。音声入力をキャプチャし、fl_chartを使用してアニメーション波形として表示します。

主な特徴：

  • リアルタイム音声キャプチャと周波数解析
  • カスタマイズ可能な周波数スペクトラム範囲
  • スムーズなアニメーション波形可視化
  • 異なるサンプルレートとバッファサイズのサポート

2. インストール方法

pubspec.yaml に以下を追加します：

dependencies:
  waveform_fft: ^0.0.3

インストール後に実行：

flutter pub get

3. プラットフォーム設定

Android設定

android/app/src/main/AndroidManifest.xml に権限を追加：

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

iOS設定

ios/Runner/Info.plist にマイク使用許可を追加：

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone to visualize audio.</string>

4. 基本的な使い方

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

class AudioVisualizerPage extends StatefulWidget {
  @override
  _AudioVisualizerPageState createState() => _AudioVisualizerPageState();
}

class _AudioVisualizerPageState extends State<AudioVisualizerPage> {
  late AudioCaptureService _audioCaptureService;
  List<double> _frequencyData = [];
  bool _isRecording = false;

  @override
  void initState() {
    super.initState();
    _audioCaptureService = AudioCaptureService();
  }

  void _startRecording() async {
    setState(() => _isRecording = true);

    await _audioCaptureService.startCapture((data) {
      setState(() {
        _frequencyData = data;
      });
    });
  }

  void _stopRecording() async {
    setState(() => _isRecording = false);
    await _audioCaptureService.stopCapture();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('音声可視化')),
      body: Column(
        children: [
          Expanded(
            child: WaveFormWidgetEq(
              data: _frequencyData,
              animationDuration: Duration(milliseconds: 200),
              updateInterval: Duration(milliseconds: 48),
              barWidth: 5.0,
              maxY: 80.0,
              minY: -80.0,
              barColor: Colors.blue,
              barAlpha: 0.7,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: _isRecording ? _stopRecording : _startRecording,
              child: Text(_isRecording ? '停止' : '開始'),
            ),
          ),
        ],
      ),
    );
  }
}

5. カスタマイズオプション

WaveFormWidgetEqのパラメータ

パラメータ説明デフォルト値
data周波数データ必須
animationDurationアニメーション速度200ms
updateInterval更新頻度48ms
barWidthバーの幅5.0
maxY / minYY軸の最大・最小値80.0 / -80.0
barColorバーの色Colors.white
barAlphaバーの透明度0.5

AudioCaptureServiceの設定

final service = AudioCaptureService(
  sampleRate: 44100,  // サンプルレート（Hz）
  bufferSize: 256,    // バッファサイズ
);

6. 応用例：音楽プレイヤー風UI

class MusicVisualizerWidget extends StatelessWidget {
  final List<double> frequencyData;

  MusicVisualizerWidget({required this.frequencyData});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.purple, Colors.blue],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
      child: WaveFormWidgetEq(
        data: frequencyData,
        animationDuration: Duration(milliseconds: 100),
        barWidth: 3.0,
        maxY: 100.0,
        barColor: Colors.white,
        barAlpha: 0.8,
      ),
    );
  }
}

7. パフォーマンス考慮事項

設定項目影響推奨値
サンプルレート高いほど周波数解像度向上、処理負荷も増加44100Hz
バッファサイズ小さいほど遅延減少、パフォーマンス問題の可能性256サンプル
更新間隔短いほどスムーズ、CPU使用率増加48ms

8. 注意点

  • Android API 21+、iOS 13.0+が必要
  • マイクアクセス権限が必須（実行時に許可が必要）
  • デバイスの処理性能によってはパフォーマンスに影響する可能性
  • AudioCaptureServiceはシングルトンのため、アプリケーション内で一度だけ初期化すること

まとめ

特徴内容
リアルタイム音声可視化FFTを使用した高精度な周波数解析
簡単な実装数行のコードで波形表示が可能
高いカスタマイズ性色、サイズ、アニメーション等を柔軟に設定
マルチプラットフォーム対応Android・iOS両対応

おわりに

waveform_fft パッケージを使用することで、プロ級の音声可視化機能をFlutterアプリに簡単に実装できます。
音楽アプリ、音声レコーダー、オーディオ解析アプリなどの開発に最適なパッケージです。

参考リンク

タイトルとURLをコピーしました