【Flutter】 ローカルに保存された音声ファイルを再生する

注記

ライブラリが更新されたため、記事を改定しました。pub.devにあるものではなく、Githubのものを使用します。
おそらくAndroid向けにビルドすると、Kotlinのバージョンエラーが出るかと思われます.
pubspec.yamlの書き方を変えること、SEの再生方法を変えることによって解決することができますので、ご対応の程よろしくおねがいします。

概要

今回はassetsディレクトリ以下のファイルを再生するための、ライブラリと手順を紹介します.

現在(2019/08/30)、Flutter公式で音声ファイルを再生するものは無い様です。（動画再生用のものはあるらしいのです) そこで、pub.dev で公開されているライブラリを使用します.
また、このライブラリは曲のように長時間のものも扱えるようですが、今回は簡略化のためSE(効果音)のように１秒ほどの音声を鳴らすものを仮定して行きます.

使用環境

• OS
  • Windows10 64bit
• 使用ライブラリ
  • [assets_audio_player] (https://github.com/florent37/Flutter-AssetsAudioPlayer)
• 環境
  • VisualStudioCode
• 音声ファイル
  • foo.mp3 (1秒未満のSE音源)
• ビルド対象OS
  • Android5.0

手順

1. 音声ファイルの準備

プロジェクトディレクトリの直下にassetsディレクトリを新規作成し、mp3ファイルを入れておきます.

2. pubspec.yamlを編集する

pubspec.yamlを編集します.

2-1. Flutterのバージョンを設定

以前は、設定する必要があったのですが、(2019/11/17) 現在、行う必要がなくなりました.
プロジェクト生成時のままで大丈夫そうです。

2-2. assets_audio_playerを記述

assets_audio_playerをdev_dependencesの内部に追加し、assets_audio_playerをインストールします.
pub.devにて配布されているものが更新されていないようなのでGithubから直接、持ってきます。

pubspec.yaml

dependencies:
  flutter_test:
    sdk: flutter
  assets_audio_player:
    git: git://github.com/florent37/Flutter-AssetsAudioPlayer.git
    ref: master

2-3. assetsディレクトリを追記

assetsディレクトリを参照できるように追記します.

pubspec.yaml

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:      # <= これと
    - assets/  # <=　これを追記。ディレクトリ下のファイルをすべて追加するのであれば/を忘れないこと

dependencesやdev_dependencesの内部ではなく、Flutterのみで独立している部分であることに注意してください。コメントアウトも場所の参考になると思います.

2-4. pubspec.yamlを保存してflutter pub getを実行

VSCodeを利用している方なら多分、保存するだけで勝手に実行されるかと思われます。
AndroidStudioは使ったことがないのでわかりませんが、import時にライブラリがインポートできないようなエラーに遭遇するのであれば上記コマンドが実行されていない可能性があるので、ターミナルで叩いてみてください。

3. 使ってみる

3-1. ライブラリをインポート

ライブラリをインポートします.

main.dart

import 'package:assets_audio_player/assets_audio_player.dart';

3-2. 音声を準備して鳴らす

main.dart

//AssetsAudioPlayerをインスタンス化
AssetsAudioPlayer _assetsAudioPlayer = AssetsAudioPlayer();

//音声をセット
void loadSE() {
  _assetsAudioPlayer.open(AssetsAudio(
      asset: "foo.mp3",
      folder: "assets/",
  ));
}

//音声を鳴らす
void playSE () {
    _assetsAudioPlayer.play();
}

以上です. あとはplaySE()をボタンかなんかで呼び出してあげましょう。

注記

追記(2019/11/17)

ライブラリが更新されたことにより、open()で鳴ってしまうバグ, play()で鳴らないバグは修正された模様です。

また、使用中にデバッグ時にコンソールを見ているとAssetsAudioPlayer.play()をした時はエラーが出ず（音が鳴らないときも）、open()を呼び出したときはエラーが出てきます。とはいえ、内容が

E/MediaPlayer-JNI(17886): QCMediaPlayer mediaplayer NOT present
E/MediaPlayer(17886): Should have subtitle controller already set
W/MediaPlayer(17886): mediaplayer went away with unhandled events

なので直接的に問題が存在するようなものでもなさそうです.　(上2つのエラーはQCMediaPlayerに対応してない、字幕がないなので問題ありません。下のWarningはプラグインの挙動による問題だと思います。mediaplayerを開放していないことによるエラー(?)みたいです)

また、このライブラリは音楽プレーヤーを作ることも可能なようなので参考にしてみてください(Githubにはexampleがあります。音楽プレイヤーアプリです。１曲目がエモかったです)

最後に

初めてのQiita記事だったので拙い部分もあると思いますが、ローカルに保存された音声を鳴らすという割と需要がありそうな部分が、調べても調べても出てこなかったのでこちらの記事を作成しました.
不備、誤記などございましたらお気軽にお申し付けください.

ライブラリのアプデに関しては、バグ解消とKotlinのバージョン対応だった模様です。

参考文献

• [Midium] How to add music / audio to your Flutter app: https://link.medium.com/5hEmetMuwZ

• [Github] AssetsAudioPlayer: https://github.com/florent37/Flutter-AssetsAudioPlayer

• [pub.dev] assets_audio_player: https://pub.dev/packages/assets_audio_player