Flutter集成JavaScript库插件import_js_library的使用

在Flutter Web项目中集成JavaScript库。

导入JavaScript库

flutter:
  assets:
    - assets/howler.js

importJsLibrary(url: "./assets/howler.js", flutterPluginName: "audio_plugin_example");

为什么需要这样做？

使用与Flutter Web兼容的音频库：assets_audio_player

现代Web音频库Howler.js：https://howlerjs.com/

如何使用它

1. 创建你的插件包

flutter create --template=package audio_plugin_example

2. 在资源文件中添加JavaScript库

从https://github.com/goldfire/howler.js/tree/master/dist下载。

3. 在pubspec.yaml中声明JavaScript库

flutter:
  assets:
    - assets/howler.js

4. 引入import_js_library插件

dependencies:
  import_js_library: ^1.0.1

5. 在你的Flutter插件项目中导入JavaScript库

例如，在registerWith()方法中。

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. 使用package:js封装JavaScript方法和类

@JS()
library howl.js;

import 'package:js/js.dart';

@JS("Howl")
class Howl {
  external Howl({List<String> src}); 

  external play();
}

7. 使用你的库

final audio = Howl(src: ["./assets/astronomia.mp3"]);
audio.play();

例如，在插件中：

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;
  }
}

具体用例

import_js_library用于导入并封装Howl.js库，以便在flutter_web_howl库中使用。flutter_web_howl被包含在Assets Audio Player中，以处理Flutter Web上的功能。

示例代码：

import 'package:audio_plugin_example/audio_plugin.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Row(
            children: [
              Expanded(flex: 1, child: AudioPage("./assets/test.mp3")),
              Expanded(flex: 1, child: AudioPage("./assets/astronomia.mp3")),
            ],
          ),
        ),
      ),
    );
  }
}

class AudioPage extends StatelessWidget {
  final String audioPath;

  AudioPage(this.audioPath);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(this.audioPath),
        RaisedButton(
          child: Text('打开'),
          onPressed: () {
            Audio.open(this.audioPath);
          },
        ),
        RaisedButton(
          child: Text('播放'),
          onPressed: () {
            Audio.play();
          },
        ),
        RaisedButton(
          child: Text('暂停'),
          onPressed: () {
            Audio.pause();
          },
        ),
      ],
    );
  }
}