Zenn
🎵

Flutter audioplayers 効果音の連続再生

2024/08/04に公開
Flutter
se
audioplayers
tech

動作環境

audioplayers: ^6.0.0

概要

  • audioplayersパッケージを利用して、効果音のSEを連続で再生できるようにしたい。
  • 再生処理のplay()だけだと、２連続再生ができない状況だった。

対応ポイント

play()のまえに、stop()をいれる。
play()のまえに、seek(Duration.zero)をいれる。これだけでOK！。
（※seek(zero)で、再生位置を開始位置に戻して対応）

final myPlayer = AudioPlayer(playerId: 'my');

// NOTE: stop()だと処理が重く？、連続で対応していると、稀にUIスタックがみられたので、seek()で対応中。様子見。
// myPlayer.stop();
myPlayer.seek(Duration.zero); 
myPlayer.play(AssetSource('assets/se/hoge.mp3'));

※以降は、発展内容

改良

都度、stop()&play()するのが、めんどいので、playAfterStop()処理を定義して利用する。

// myPlayer.stop();
// myPlayer.play(...);
↓
myPlayer.playAfterStop(...);

独自に拡張

play()のまえに、stop()をする処理をExtensionで定義

// AudioPlayerの独自の拡張
extension AudioplerExtensions on AudioPlayer {

  // 連続再生が可能な、「play」処理を定義
  // 各引数は、AudioPlayer.play()のシグネチャと合わせて定義。
  // AssetSourceは必須、{}内はOptionパラメーター
  Future<void> playAfterStop(
    AssetSource source, {
      double? volume,
      double? balance,
      AudioContext? ctx,
      Duration? position,
      PlayerMode? mode,
  }) async {
    // NOTE: 連続で音を再生させるため、最初にstop()処理を入れてから、play()生成する。
    await this.stop();
    await this.play(
      source,
      volume: volume,
      balance: balance,
      ctx: ctx,
      position: position,
      mode: mode,
    );
  }

}

動作確認

final myPlayer = AudioPlayer(playerId: 'my');

myPlayer.playAfterStop(AssetSource('assets/se/hoge.mp3'));
await Future.delayed(Duration(milliseconds: 100));
myPlayer.playAfterStop(AssetSource('assets/se/hoge.mp3'));
await Future.delayed(Duration(milliseconds: 100));
myPlayer.playAfterStop(AssetSource('assets/se/hoge.mp3'));

Discussion