FlutterでFirebaseStorageに保存している音声ファイルを再生する

この記事を書こうと思ったきっかけ

Flutterの自己学習でポケモン図鑑を作成してみようと思った際、
鳴き声を再生させる機能が欲しかったため自分なりに実装してみました!

前提条件

たくさんの方がFlutterでFirebaseの連携方法をわかりやすく書いてくださっているので
本記事では省略させて頂きます。
別途FirebaseStorageにどのようなフォルダ構造で自分が保存しているかは記載致します。
また音声ファイルを再生するためjust_audioもインポートします。
バージョンは下記になります。

  firebase_core: ^2.5.0
  cloud_firestore: ^4.3.2
  firebase_storage: ^11.0.11
  just_audio: ^0.9.31

1.FirebaseStorageに音声ファイルを保存

FirebaseのプロジェクトからStorageを選択しプロジェクトを開始します。
その後DLというフォルダを作成しDLフォルダの中に
再生したい音声データをアップロードします。
下記キャプチャは音声データをアップロードしている状態です。

2.main.dartでFirebaseStorageに保存している音声のURL取得メソッドを作る

Future _download()というメソッドを作成し
FirebaseStorageのDLフォルダ内にある音声ファイルのURLを取得する処理を記載します。
コード毎の処理も下記に記載しております。

class _MyHomePageState extends State<MyHomePage> {

  Future<void> _download() async {
    FirebaseStorage storage = FirebaseStorage.instance;
    //firebase_storageのDLフォルダ内の001.wav音声をitemRefに入れる
    Reference itemRef = storage.ref().child("DL").child("001.wav");
    //itemRefからURLを取得しitemUrlに入れる
    String itemUrl = await itemRef.getDownloadURL();
  }

3. 2で作成したメソッドに音声フォルダを再生する処理を追加

class _MyHomePageState extends State<MyHomePage> {
  //3で追加
　final player = AudioPlayer();

  Future<void> _download() async {
    FirebaseStorage storage = FirebaseStorage.instance;
    //firebase_storageのDLフォルダ内の001.wav音声をitemRefに入れる
    Reference itemRef = storage.ref().child("DL").child("001.wav");
    //itemRefからURLを取得しitemUrlに入れる
    String itemUrl = await itemRef.getDownloadURL();
　　//ここから下の処理が3で追加
　　//もしitemUrlが空じゃなければplayerにURLをセット
    if( itemUrl != "") {
      await player.setUrl(itemUrl);
    } else {
      print('失敗');
    }
    //音声を鳴らす
    player.play();
  }

あとは上記のメソッドをボタン押下時の処理(onPressed等)に入れて頂ければと思います。

まとめ

メソッドをもう少し処理毎に分けた方がいいかと思いましたが
ひとまず音声ファイルの再生は可能だと思います。
他にも図鑑に入れたい機能があるので実現できたら記事書いてみようと思います。
ポケモンのゲームの鳴き声ってアニメと全く違うのでギャップにびっくりします、、