【Flutter】AudioPlayers で音声を再生する | ヒヨコ プログラミング(ヒヨプロ)

【Flutter】AudioPlayers で音声を再生する

Flutter

Flutter で BGM や効果音を再生する方法について紹介します!
今回は、AudioPlayers のパッケージを使用して音声を再生します。

事前準備

事前準備として、AudioPlayers のパッケージインストールや、音声ファイルの配置等を行います。

パッケージをインストール

まずは、AudioPlayers のパッケージをインストールしましょう!

Android Studio の Terminal を開いて、下記コマンドを入力します。

$ flutter pub add audioplayers

pubspec.yaml の dependencies 以下に audioplayers が追記されればインストール完了です。

dependencies:
  flutter:
    sdk: flutter

  audioplayers: ^1.2.0

パッケージのインストール方法については、以下の記事で詳しく紹介しています。

音声ファイルを準備

次に、再生したい音声ファイルをプロジェクト内に用意しましょう。

プロジェクト直下に assets フォルダを作成し、音声ファイルを配置します。

assetsフォルダの作成と音声ファイルの配置

pubspec.yaml の編集

また、pubspec.yaml に以下の記述を追加します。

flutter:
  assets:
    - assets/

assets: 以下を flutter: ブロック内に記述しないと、実行時に Unable to load asset のエラーになるので、注意してください。

// flutter: ブロック外なのでエラー
assets:
  - assets/

再生方法

事前準備が出来たら、音声を再生するソースコードを記述していきましょう。

インポート

まずは、以下のように AudioPlayers をインポートしておきます。

import 'package:audioplayers/audioplayers.dart';

インスタンスの初期化

次に、AudioPlayer インスタンスを初期化します。

final audioPlayer = AudioPlayer();

再生/ループ再生

音声を再生するには、以下のように play メソッドを使用します。

audioPlayer.play(AssetSource("sample.wav"));

また、以下のように ReleaseMode を loop に設定することで、再生した音声がループするようになります。

audioPlayer.setReleaseMode(ReleaseMode.loop);

停止

再生した音声を停止する場合は、stop メソッドを使用します。

audioPlayer.stop();

一時停止/再開

一時停止する場合は、pause メソッドを使用します。音声を途中で止めて、止めた部分からの続きを再生するような処理を行いたい場合は、stop ではなく、pause を使用します。

audioPlayer.pause();

一時停止した音声を再開するには、resume メソッドを使用します。途中で一時停止した部分から、続きを再生できます。
また、ループ再生中の音声を stop メソッドで停止した後、resume メソッドを呼び出すと、音声は先頭から再生されます。

audioPlayer.resume();

インスタンスの破棄

dispose メソッドで AudioPlayer インスタンスの破棄を行うことができます。
以降、AudioPlayer インスタンスを使用しない場合に、dispose メソッドを実行します。

audioPlayer.dispose();

使用例

ソースコード

以下、AudioPlayer を使用して音声を再生するソースコードです。

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

class AudioPlayersSample extends StatefulWidget {
  const AudioPlayersSample({Key? key}) : super(key: key);

  @override
  State<AudioPlayersSample> createState() => _AudioPlayersSampleState();
}

class _AudioPlayersSampleState extends State<AudioPlayersSample> {
  final audioPlayer = AudioPlayer();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("AudioPlayers Sample"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: (){
                  audioPlayer.play(AssetSource("sample.wav"));
                },
                child: const Text("Play"),
              ),
              ElevatedButton(
                onPressed: (){
                  setState(() {
                    audioPlayer.releaseMode == ReleaseMode.release ?
                    audioPlayer.setReleaseMode(ReleaseMode.loop) :
                    audioPlayer.setReleaseMode(ReleaseMode.release);
                  });
                },
                child: audioPlayer.releaseMode == ReleaseMode.release ?
                       const Text("Loop OFF") : const Text("Loop ON "),
              ),
              ElevatedButton(
                onPressed: (){
                  audioPlayer.stop();
                },
                child: const Text("Stop"),
              ),
              ElevatedButton(
                onPressed: (){
                  audioPlayer.pause();
                },
                child: const Text("Pause"),
              ),
              ElevatedButton(
                onPressed: (){
                  audioPlayer.resume();
                },
                child: const Text("Resume"),
              ),
            ],
          ),
        )
    );
  }
}

解説

16行目では、StatefulWidget が dispose するタイミングで、AudioPlayer のインスタンスを破棄するため、dispose メソッドを呼び出しています。

39〜41行目では、ボタンが押された時、現在の ReleaseMode が release なら loop に設定、release でないなら release に設定しています。こうすることで、ループ再生の ON/OFF を切り替えられるようになっています。

まとめ

AudioPlayers を使用して、音声を再生する方法について紹介しました!

  • AudioPlayers パッケージで、音声を再生することができます。
  • AudioPlayer クラスの各メソッドで、音声の再生・停止等を行うことができます。
    • 再生 → play メソッド(ループ再生するには、ReleaseMode を loop に設定)
    • 停止 → stop メソッド
    • 一時停止 → pause メソッド
    • 再開 → resume メソッド

以上で、【Flutter】AudioPlayers で音声を再生する は終わりです。

参考

おすすめ書籍

コメント

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