Zenn
🗂

【Flutter】音声を録音する

2024/04/16に公開
Flutter
tech

以下はFlutterを使って音声を録音して再生する方法についての記事です。audio_recorder.dart と audio_player.dart ファイルを用いて、手順を解説していきます。それぞれのコードのサンプルも交えて、具体的にどう実装するかを見ていきましょう。

Flutterで手軽に音声録音＆再生

今回は、Flutterで音声アプリを簡単に作成する方法を紹介します。必要なパッケージは record と audioplayers です。これらを使って、録音と再生の基本的な流れを把握しましょう。

必要なパッケージの準備

プロジェクトに必要なパッケージを追加しましょう。pubspec.yaml ファイルを開き、以下の依存関係を記入してください。

dependencies:
  flutter:
    sdk: flutter
  record: ^4.0.0
  audioplayers: ^0.20.1

これで必要なライブラリが利用可能になります。次に、具体的な実装を見ていきます。

録音機能のセットアップ (audio_recorder.dart)

Recorder というクラスを使って、録音の管理を行います。録音開始から停止までの流れをコントロールします。コードは以下の通りです。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:record/record.dart';

class Recorder extends StatefulWidget {
  final void Function(String path) onStop;

  const Recorder({super.key, required this.onStop});

  @override
  State<Recorder> createState() => _RecorderState();
}

class _RecorderState extends State<Recorder> {
  int _recordDuration = 0;
  Timer? _timer;

  // 録音を開始するメソッド
  Future<void> _startRecording() async {
    await Record().start();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _recordDuration++;
      });
    });
  }

  // 録音を停止するメソッド
  Future<void> _stopRecording() async {
    final path = await Record().stop();
    _timer?.cancel();
    widget.onStop(path);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: _startRecording,
          child: Text('録音開始'),
        ),
        ElevatedButton(
          onPressed: _stopRecording,
          child: Text('録音停止'),
        ),
        Text('録音時間: $_recordDuration 秒'),
      ],
    );
  }
}

音声の再生 (audio_player.dart)

録音されたデータを再生するための AudioPlayer クラスを実装します。再生、停止、およびオプションで削除の機能を提供します。

import 'package:audioplayers/audioplayers.dart' as ap;
import 'package:flutter/material.dart';

class AudioPlayer extends StatefulWidget {
  final String source;
  final VoidCallback onDelete;

  const AudioPlayer({super.key, required this.source, required this.onDelete});

  @override
  _AudioPlayerState createState() => _AudioPlayerState();
}

class _AudioPlayerState extends State<AudioPlayer> {
  final ap.AudioPlayer _audioPlayer = ap.AudioPlayer();

  // 再生を開始するメソッド
  void _play() async {
    await _audioPlayer.play(widget.source, isLocal: true);
  }

  // 再生を停止するメソッド
  void _stop() async {
    await _audioPlayer.stop();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: _play,
          child: Text('再生'),
        ),
        ElevatedButton(
          onPressed: _stop,
          child: Text('停止'),
        ),
        if (widget.onDelete != null)
          Elevated

Button(
            onPressed: widget.onDelete,
            child: Text('録音削除'),
          ),
      ],
    );
  }
}

まとめ

この記事で紹介した手順を踏むことで、Flutterを使用して音声の録音と再生を行う基本的なアプリケーションを作成できます。これを基にして、更に多様な機能を追加することも可能です。是非、試してみてください。

Discussion