Edited at
DartDay 14

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

More than 1 year has passed since last update.

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 を作成して見ることにしました。


こんな感じにした

https://github.com/kyorohiro/umiuni2d_media/

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