Flutterで音楽ファイルを指定して再生するサンプルコード

指定した音楽ファイルを再生する

assetsの音楽ファイルを再生する

という記事はいくつかあったのですが、

スマホの音楽ファイルを指定して再生する方法が見当たらなかったので

今回記事にしてみました。

今回作ったサンプル

今回作ったサンプルプログラムの説明です。

『音楽ファイルを選択』を押すと、ファイル選択のダイアログが出てきます。

最初の画面

ファイル選択ダイアログ

音楽ファイルを選択すると最初の画面に戻ります。

※エミュレータで動かす場合、音楽ファイルはないので自分で音楽ファイルをあらかじめ入れておいてください。単純にPCからエミュレータのスマホ画面にドラッグアンドドロップすれば音楽ファイルを入れられると思います。

『音楽ファイルを再生』を押すと指定した音楽が流れます。

『音楽ファイルを停止』を押すと指定した音楽が停止されます。

実際のソースコード

ソースコードだけ見ればわかる人もいると思うので先にソースコードを公開します。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';//ファイル選択のため
import 'dart:io';//ファイル選択のため
import 'package:just_audio/just_audio.dart';//音楽再生のため
//変数定義
late AudioPlayer _player;
String strSePath = '';
//メイン処理
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Audio Select Play Stop',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Audio Select Play Stop'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("音楽ファイル選択・再生・停止"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed:() async {
                musicFileSelect();
              },
              child: const Text("音楽ファイルを選択"),
            ),
            ElevatedButton(
               onPressed:() async {
                playMusic();
              },
              child: const Text("音楽ファイルを再生"),
            ),
            ElevatedButton(
              onPressed:() async {
                stopMusic();
              },
              child: const Text("音楽ファイルを停止"),
            ),
            const Padding(padding: EdgeInsets.all(10.0),),
            const Text("選択した音楽ファイル"),
            Text(strSePath),
          ],
        ),
      ),
    );
  }
 //音楽ファイル選択メソッド
  void musicFileSelect() async {
    FilePickerResult? result;
    result = await FilePicker.platform.pickFiles(
        dialogTitle: 'Please Play Music File', type: FileType.audio
    );
    if (result != null) {
      File file = File(result.files.single.path!);
      setState(() => {
        strSePath = file.path.toString()
      });
    }
  }
//音楽ファイル再生メソッド
  void playMusic() async{
    _player = AudioPlayer();
    await _player.setLoopMode(LoopMode.all);
    if( strSePath != "") {
      await _player.setFilePath(strSePath);
    }
    await _player.play();
  }
//音楽ファイル停止メソッド
  void stopMusic() async{
    _player.stop();
  }
}

pubspec.yaml

name: audioplaysample
description: AudioPlaySample
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
  sdk: '>=2.18.4 <3.0.0'
dependencies:
  flutter:
    sdk: flutter
  file_picker: ^5.2.2
  just_audio: ^0.9.30
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
flutter:
  uses-material-design: true

GitHub上に公開

上のソースコードはGitHub上に公開しています。

Flutterで音楽ファイルを指定して再生するサンプルコード

ソースコード解説

上のソースコードを読んで分かる人は解説読まなくても良いですが、

一応解説です。

今回必要なAPIは以下です。

file_picker

ファイル選択ダイアログを表示させます。

今回のサンプルコードでは

『音楽ファイルを選択』ボタンを押下するとファイル選択ダイアログを表示させる仕組みにしています。

pubspec.yaml

file_picker: ^5.2.2

file_pickerを使うのでpubspecに追加し、

コンソールで『flutter pub get』を実行

main.dart

import文の追加

import 'package:file_picker/file_picker.dart';//ファイル選択のため
import 'dart:io';//ファイル選択のため

importを追加します。

選択したfile名を格納するFileクラスを使用するため

dart:io

もimportします。

『音楽ファイルを選択』ボタン

            ElevatedButton(
              onPressed:() async {
                musicFileSelect();
              },

今回のサンプルでは

『音楽ファイルを選択』ボタン

が押下されたら

musicFileSelect()

というメソッドを呼び出すようにしています。

ここにファイル選択ダイアログ処理を記載しています。

ファイル選択ダイアログを表示させる

//音楽ファイル選択メソッド
  void musicFileSelect() async {
    FilePickerResult? result;
    result = await FilePicker.platform.pickFiles(
        dialogTitle: 'Please Play Music File', type: FileType.audio
    );
    if (result != null) {
      File file = File(result.files.single.path!);
      setState(() => {
        strSePath = file.path.toString()
      });
    }
  }

ファイル選択ダイアログのメイン処理です。

FilePicker.platform.pickFiles

を呼び出すことで、ファイルダイアログが表示されます。

呼び出すときに

type: FileType.audio

を引数として指定しておくと音楽ファイルのみ選択できようになりますので、サンプル通りに実装するとよいと思います。

ファイルを選択すると

result

に指定した情報が返ってきますので、

Fileクラスを使って、あらかじめ定義しておいた

変数：strSePath

にセットしておきます。

just_audio

指定したファイルパスの音楽ファイル再生します。

このAPIは他にも

指定したURLからストリーミング再生
Assetsからの再生

にも対応しています。

今のところFlutter音楽再生APIでは最強クラスのAPIだと思います。

pubspec.yaml

just_audio: ^0.9.30

pubspecに追加し、

コンソールで『flutter pub get』を実行

main.dart

import文の追加

import 'package:just_audio/just_audio.dart';//音楽再生のため

importを追加します。

『音楽ファイルを再生・停止』ボタン

ElevatedButton(
               onPressed:() async {
                playMusic();
              },
              child: const Text("音楽ファイルを再生"),
            ),
            ElevatedButton(
              onPressed:() async {
                stopMusic();
              },
              child: const Text("音楽ファイルを停止"),
            ),

今回のサンプルでは

『音楽ファイルを再生』ボタン

が押下されたら

playMusic()

というメソッドを呼び出し、

『音楽ファイルを停止』ボタン

が押下されたら

stopMusic()

というメソッドを呼び出すようにしています。

音楽ファイル再生

//音楽ファイル再生メソッド
  void playMusic() async{
    _player = AudioPlayer();
    await _player.setLoopMode(LoopMode.all);
    if( strSePath != "") {
      await _player.setFilePath(strSePath);
    }
    await _player.play();
  }
//音楽ファイル停止メソッド
  void stopMusic() async{
    _player.stop();
  }

83行目