Flutterでアプリ開発・画面にBGMを奏でる

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  audioplayers: ^0.19.1  # <-- これを追加

flutter:

  # To add assets to your application, add an assets section, like this:
  assets:
      - assets/bgm/   # <-- これも追加

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

class BgmPlayer {

  late AudioCache _cache = AudioCache(fixedPlayer: AudioPlayer());
  AudioPlayer? _player;

  BgmPlayer({required String name, bool isLoop = true}) {
    () async {
      await _player?.stop();
      await _player?.dispose();
      if (isLoop) {
        _player = await _cache.loop(name, mode: PlayerMode.MEDIA_PLAYER);
      } else {
        _player = await _cache.play(name, mode: PlayerMode.MEDIA_PLAYER);
      }
    }();
  }

  void resumeBgm() async {
    _player?.resume();
  }

  void pauseBgm() async {
    await _player?.pause();
  }

  void stopBgm() async {
    await _player?.stop();
  }

  Future<void> disposeBgm() async {
    return await _player?.dispose();
  }

}

import 'package:flutter/material.dart';

import 'PageA.dart';
import 'PageB.dart';
import 'PageC.dart';

void main() {
  runApp(MyApp());
}

// RouteObserverを利用するので、本件ではクラス外にて定義
var routeObserver = RouteObserver<PageRoute>();

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/pageA",
      routes: {
        "/pageA": (context) => PageA(),
        "/pageB": (context) => PageB(),
        "/pageC": (context) => PageC(),
      },
      navigatorObservers: [
        routeObserver,
      ],
    );
  }
}

import 'package:bgmtestapp/BgmPlayer.dart';
import 'package:flutter/widgets.dart';
import '../../main.dart';

abstract class BasePageState<T extends StatefulWidget> extends State<T> with WidgetsBindingObserver, RouteAware {
  BgmPlayer? _bgm;
  // 自身の画面が表に表示されているかのフラグ
  bool isActive = false;

  // コンストラクタ --------------------------------------------------
  BasePageState({String? fileName}) {
    if (fileName != null && fileName.isNotEmpty) {
      _bgm = BgmPlayer(name: "bgm/$fileName");
    }
  }

  // アプリケーションのライフサイクル start --------------------------------------------------
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      this.onForeground();
    } else if (state == AppLifecycleState.paused) {
      this.onBackground();
    }
  }
  void onBackground() {
    // ホーム画面に切り替わり、バックグラウンド状態のとき、BGMを一時停止する
    this._bgm?.pauseBgm();
  }

  void onForeground() {
    if (this.isActive) {
      // 自分自身の画面がトップに表示されていれば、以降の処理を実施
      // ホーム画面からアプリに戻り、フォアグラウンド状態に戻ったとき、BGMを再生する
      this._bgm?.resumeBgm();
    }
  }
  // アプリケーションのライフサイクル end --------------------------------------------------
  // StatefulWidget（画面）のライフサイクル start --------------------------------------------------
  @override
  void initState() {
    super.initState();
    // アプリの状態遷移をハンドリングできるようにする
    WidgetsBinding.instance?.addObserver(this);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 画面遷移をハンドリングできるようにする
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void dispose() {
    // POP、replace時に画面終了する際、後始末をする
    this.isActive = false;
    this._bgm?.stopBgm();
    this._bgm?.disposeBgm();
    this._bgm = null;
    WidgetsBinding.instance?.removeObserver(this);
    routeObserver.unsubscribe(this);
    super.dispose();
  }
  // StatefulWidget（画面）のライフサイクル end --------------------------------------------------
  // 画面遷移時のライフサイクル start --------------------------------------------------
  @override
  void didPush() {
    // 自身の画面がコールされたときに、isActiveをtrueにする
    this.isActive = true;
    super.didPush();
  }

  @override
  void didPopNext() {
    // 次画面がPOPされ自身の画面に戻ってきたとき、isActiveをtrueにし、BGMを再生させる
    this.isActive = true;
    this._bgm?.resumeBgm();
    super.didPopNext();
  }

  @override
  void didPushNext() {
    // Pushにて次画面に遷移する際、isActiveをfalseにし、BGMを一時停止させる
    this.isActive = false;
    this._bgm?.pauseBgm();
    super.didPushNext();
  }

  // 画面遷移時のライフサイクル end --------------------------------------------------

  // 子クラスにおいては標準のbuildの代わりに実装を強制させる
  // 標準のbuildを利用したい場合、本メソッドの戻り値にnullを設定可能とする
  Widget? buildChildWidget(BuildContext context);

  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) => WillPopScope(
        child: this.buildChildWidget(context) ?? Text(""), // 上記の抽象メソッドをコール
        onWillPop: () async {
          // 自身の画面がPOPされたときに、Playerクラスの後始末をする
          // Androidでの戻るボタンでアプリを終了させる場合、
          // POP実行前のタイミングで後始末しないとBGMが止まらなくなる・・・
          this.isActive = false;
          this._bgm?.stopBgm();
          await _bgm?.disposeBgm();
          this._bgm = null;
          return true;
        })
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'BasePageState.dart';

class PageA extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return _PageA();
  }
}

class _PageA extends StatefulWidget {
  @override
  _PageAState createState() {
    return _PageAState();
  }
}

class _PageAState extends BasePageState<_PageA> {  // <-- ここの親クラスを「BasePageState」にする

  _PageAState(): super(fileName: "title_op_bgm.mp3");  // <-- 親クラスのコンストラクタにファイル名設定

  @override
  Widget buildChildWidget(BuildContext context) {  // <-- 通常のbuildメソッドの代わりに実装
    return Material(
        child: Scaffold(
            appBar: AppBar(
              title: Text("画面A"),
              automaticallyImplyLeading: true,
            ),
            body: Container(
                child: ElevatedButton(
                  child: Text("画面Bに進む"),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.orange,
                    onPrimary: Colors.white,
                  ),
                  onPressed: () {
                    Navigator.pushNamed(context, "/pageB");
                  },
                ),
              alignment: Alignment.center,
            )
        )
    );
  }
}