Dartを使って、Flutter と Html5 上で Audio を再生したみた。

Dart は、 サーバーサイド、 Html5、 iOS、 Android で 動作します。
Android と iOS は Flutter を利用します。 Html5 は WebDevを利用します。

残念ながら、Web用、スマートフォン用で APIが違います。
そこで、Html5 と Flutter で、同じInterface で 動作する　Audio Package を作成してみました。

ことはじめ

今、実験的に Html でも、 Flutter でも動作可能な、ゲームフレームワークを、作成しています。
Flutter のベースとなった Skyのさらにベースとなった MOJO を利用することで、
Flutter で Audio を再生できました。

しかし、流石に、メンテナンスがされていなことなどから、このAPIは廃止されてしまいました。

Andorid/iOS用の Plugin を書いて対応するようにとの事、

Audio Player を作成して見ることにしました。

こんな感じにした

Interface を以下のように切りました。

media.dart

library umiuni2d_media;

import 'dart:async';

abstract class MediaManager {
  String get assetsRoot;
  Future<MediaManager> setupMedia(String path);
  Future<AudioPlayer> loadAudioPlayer(String playerId, String path);
  Future<AudioPlayer> createAudioPlayer(String playerId, String path);
  AudioPlayer getAudioPlayer(String id);
}

abstract class AudioPlayer {
  String get playerId;
  String get url;
  Future<AudioPlayer> prepare();
  Future<double> getCurrentTime();
  Future<AudioPlayer> seek(double currentTime);
  Future<AudioPlayer> play();
  Future<AudioPlayer> pause();
  FutureOr<AudioPlayer> stop();
  Future<double> getVolume();
  void setVolume(double v);
}

で、Html5とFlutter上で動作させました。

利用した API

Android は、android.media.MediaPlayer　を を利用してAudioを再生しました。
iOSは、AVFoundation の AVAudioPlayerを利用しました。
Html5 用には、WebAudio を利用しました。

つまずいた点

pubspec.yaml に Html5 用のと、 Flutter 用ので、共用できませんでした。　2.0.0-dev.15.0で、
そのため、 3つのpackage を用意する必要がありました。

• Interface だけを定義した　package
• Flutter 用の plugin
• Html5 用の package

おわり

REF

ということで、 Html5 と Flutter 上で動作する Audio Package
https://github.com/kyorohiro/umiuni2d_media/

以下でもアレコレ書いています。
https://medium.com/@kyorohiro_72753/dart-x-flutter-memo-ex-4-lets-make-tiny-audio-library-for-flutter-and-html5-2034aada2daf