ぽちぽちのつどいGW Advent(?) Calendar4日目の記事です！
今日は少し前にやった音声の再生に関することを備忘録としてまとめました。
Flutterで音鳴らしたい時に活用してください。
just_audio✖️FlutterGenでアプリをつくる
今回はFlutterで「音声を再生するボタン」を作ります。
FlutterGenは音声を再生するためのパッケージでbuild_runnerを実行するとgenフォルダが生成される。
just_audioは音声再生のパッケージで簡単に音を鳴らすことができる。
この2つを組み合わせると、驚くほど簡単なコードで音が鳴るようになります。
準備
まずはpubspec.yamlにインストールします。
コマンドでやるならpub addでもOKです。
dependencies:
flutter:
sdk: flutter
just_audio: ^0.9.42
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^4.0.0
flutter_gen_runner: ^5.9.0
build_runner: ^2.4.13
パッケージのインストールが完了したら次はassetsフォルダをプロジェクトのルートディレクトリに配置し、audioフォルダを作成、再生したい音声を入れてください。
project/
├─ assets/
│ └─ audio/
│ └─ audio1.mp3
├─ lib/
│ └─ main.dart
├─ pubspec.yaml
ここまでできたら最後にassetsをpubspec.yamlに忘れず書きます。ここよく忘れがちなので注意です。私はここをなん度も忘れてエラーになってます(笑)
flutter:
uses-material-design: true
assets:
- assets/audio/
あとはbuild_runnerを走らせて少し待てばlib直下にgenフォルダが生成されれば成功です。
flutter pub run build_runner build --delete-conflicting-outputs
音声を再生する
ここまでできれば再生するのは簡単です。
再生するための関数を作ります。この関数自体はグローバルで管理することを前提の関数なので引数として渡してます。
Future<void> playSound(player, path) async {
try {
await player.setAsset(path);
debugPrint('音声ファイルロード完了');
player.play();
} catch (e) {
debugPrint('Error: $e');
}
}
あとは呼び出し側（UI側）でplayer変数を定義してpathを変数として格納して呼び出し時に渡せば完了です。今回はaudio1.mp3というファイルがあると仮定します。
import 'package:just_audio/just_audio.dart';
import 'package:project/gen/assets.gen.dart';
~~~
AudioPlayer player=AudioPlayer();
/// hooks
/// final player = useMemoized(() => AudioPlayer());
final path = Assets.audio.audio1;// FlutterGenが自動生成したパス
最後にplaySound関数を呼び出してplayerとpathを渡せば再生できます。
ElevatedButton(
onPressed: () =>playSound(player, path);
child: const Text('再生'),
),
さらに発展させたい人向け
これで音声を再生するボタンができました。音声を重ねたい時はplayerを複数定義すればできます。また、ループをさせる場合はsetLoopModeを使えばループして再生されます。
player.setLoopMode(LoopMode.one);
また再生速度などを変えたいといった場合にはaudio_sessionを併用することで可能です。
まとめ
これでサクッと音が鳴るボタンが作れました！
音声を重ねたいならAudioPlayerを複数インスタンス作ればOK。
超シンプルに音声機能を入れたい時に使える組み合わせだと思うのでぜひ試してみてください！
というわけで、ぽちぽちのつどいGW Advent(?) Calendar 4日目はjust_audio × FlutterGenで遊んでみた話でした！
読んでくれてありがとうございました🙇🙇🙇
Discussion