Zenn
👋

FlutterでAudioPlayersで音を出す

2021/09/12に公開
Flutter
Dart
tech

インストール

pubspec.yaml
dependencies:
  audioplayers: ^0.20.1
  
flutter:
  uses-material-design: true
  assets:
    - assets/sounds/

assetsからの音声を再生する

main.dart
import 'package:audioplayers/audioplayers.dart';

static const SOUND_DATA_UP = 'sounds/powerdown02.mp3';
static const SOUND_DATA_DOWN = 'sounds/powerup03.mp3';

final AudioCache _cache = AudioCache(
    fixedPlayer: AudioPlayer(),
);
  
_cache.loadAll([SOUND_DATA_DOWN, SOUND_DATA_UP]);
_cache.play(SOUND_DATA_UP);

(ネットやファイルからの再生は、後で書きます)

連続再生

音声を連続で再生させようとして以下のようにすると、エラーが出る。一つの目の音声の再生完了を待たないで、2つめの音声を再生しようとするから。

例外が発生する
  final AudioCache _cache = AudioCache(
    fixedPlayer: AudioPlayer(),
  );

  void play(){
    _cache.play('a.mp3');
    _cache.play('b.mp3');
  }

この場合、以下のように再生完了を待って、続きを行う必要がある。

連続再生される
  final AudioCache _cache = AudioCache(
    fixedPlayer: AudioPlayer(),
  );
  Completer _completer = Completer();
  void load(){
      _cache.fixedPlayer!.onPlayerCompletion.listen((event) async {
      if (!_completer.isCompleted) {
        _completer.complete();
      }
    });
  }
  
  void play(){
      List<String> files = ['a.mp3','b.mp3','c.mp3'];

    for (int i = 0; i < files.length; i++) {
      _completer = Completer();
      _cache.play(files[i]);
      await _completer.future;
    }
  }

最初にAudioPlayerとCompleterを定義する。AudioPlayer.onPlayerCompletion に一度だけ音声ファイル再生完了時の処理を登録する(複数登録すると、その回数だけ登録される)。その中で、Completerを完了させる。
再生する側では、ファイルごとにCompleterを生成し(一度使ったら、完了前には戻せない)、音声を再生させる。それから音声完了を待つ(Complete.complete()が実施されるまで)。完了後、次のファイルの処理をする。
if (!_completer.isCompleted) があるのは、連続再生以外のときに Completer.complete() を実施すると、Completerが実施済みの可能性があり、そのときはエラーが出るため。

トラブルシューティング

本編(笑)音が出ない場合の確認どころ。

  • 音声ファイルの場所は間違えていないか(keyがないと言われるので、気づく)

    • AudioPlayer(prefix:'assets/')とした場合、最後の「/」は入っているか
    • AudioPlayer()とした場合、assetsが勝手につく。アッセト名の最初にassetsが入っていると、assets/assetsになり、見つからない。
    • ファイルがプロジェクトに含まれているか
    • pubspec.yamlにassetでファイルの場所を定義しているか
    • pubspec.yamlにて、assets:の前に半角スペースが2つ、'-'の前に半角スペースが4文字入っているか
    • pubspec.yaml修正後、pub getは実施したか
    • pub getした後、アプリを再起動したか

  • そもそも使用しているエミュレータで音が出るのか

    • 音量がミュートになってないか
    • エミュレータのブラウザでyoutubeなどを見て、音が出るか
    • 別のエミュレータやChromeで実行してみる
    • エミュレータを再起動する

Discussion