Import JS Library
Import & use javascript libraries in your flutter web projects.
flutter:
assets:
- assets/howler.jsimportJsLibrary(url: "./assets/howler.js", flutterPluginName: "audio_plugin_example");Why
Audio library compatible with Flutter Web : https://pub.dev/packages/assets_audio_player
Howler.js Audio library for the modern web : https://howlerjs.com/
And after weeks, month, years, eternity later....
How to use it
1. Create your plugin Package
https://flutter.dev/docs/development/packages-and-plugins/developing-packages
flutter create --template=package audio_plugin_example2. Add the js library in your assets
Downloaded from https://github.com/goldfire/howler.js/tree/master/dist
3. Declare it inside your pubspec.yaml
flutter:
assets:
- assets/howler.js4. Import import_js_plugin
dependencies:
import_js_library: ^1.0.1
5. In your Flutter plugin project, import your .js lib
For example, on the registerWith()
pluginName: the name of your plugin, based on pubspecs.yaml, here audio_plugin_example
Using the method importJsLibrary(url: PATH_OF_JS, flutterPluginName: NAME_OF_FLUTTER_PLUGIN);
class AudioPlugin {
static void registerWith(Registrar registrar) {
final MethodChannel channel = MethodChannel(
'audio_plugin',
const StandardMethodCodec(),
registrar.messenger,
);
importJsLibrary(url: "./assets/howler.js", flutterPluginName: "audio_plugin_example");
final AudioPlugin instance = AudioPlugin();
channel.setMethodCallHandler(instance.handleMethodCall);
}
...6. Using package:js, wrap your js methods/classes
@JS()
library howl.js;
import 'package:js/js.dart';
@JS("Howl")
class Howl {
external Howl({List<String> src});
external play();
}7. Use your library !
final audio = Howl(src: ["./assets/astronomia.mp3"]);
audio.play();for example in the plugin
Howl audio;
Future<dynamic> handleMethodCall(MethodCall call) async {
print(call.method);
switch (call.method) {
case "play":
if(audio != null){
audio.play();
}
break;
case "pause":
if(audio != null){
audio.pause();
}
break;
case "open":
final String path = call.arguments["path"];
audio = Howl(src: [path]);
break;
}
}Concrete use-case
`import_js_library" is used to import & wrap Howl.js for the library https://pub.dev/packages/flutter_web_howl
And flutter_web_howl is included inside Assets Audio Player to handle the features on flutter web
https://pub.dev/packages/assets_audio_player
https://github.com/florent37/Flutter-AssetsAudioPlayer/blob/master/lib/assets_audio_player_web.dart