js_bindings icon indicating copy to clipboard operation
js_bindings copied to clipboard

example needed for midi api

Open robertmuth opened this issue 2 years ago • 2 comments

I was just trying some variants discussed in:

https://github.com/dart-lang/sdk/issues/33248

The best I could achieve was:

StdOut: Warning: The 'dart2js' entrypoint script is deprecated, please use 'dart compile js' instead. org-dartlang-app:///web/main.dart@346+17: Error: The method 'requestMidiAccess' isn't defined for the class 'Navigator'.

  • 'Navigator' is from 'package:js_bindings/bindings/html.dart' ('org-dartlang-app:///packages/js_bindings/bindings/html.dart'). Error: Compilation failed.

my code is:

import 'package:js_bindings/js_bindings.dart';
import 'package:js/js.dart';
import 'package:js/js_util.dart' as jsutil;
...
  final opts = MIDIOptions(sysex: true, software: false);
  final a = await window.navigator.requestMidiAccess(opts);
...

Not sure if it is my problem or the library's.

An example that is known to work would help.

robertmuth avatar May 14 '22 15:05 robertmuth

this seems to be working:

import 'package:js_bindings/js_bindings.dart';

Future<void> main() async {
  final access = await window.navigator
      .requestMIDIAccess(MIDIOptions(sysex: true, software: false));

  access.inputs.forEach((c, k, m) {
    print('Test $c\n $k\n $m');
  });
}

jodinathan avatar May 15 '22 23:05 jodinathan

Oops, yes I had type. Here is an example that covers a lot of the functionality. Maybe you can add it:

import 'package:js_bindings/js_bindings.dart';


dynamic make_handler(name) {
  return (msg) => print("$name}, ${msg.data}");
}

String RenderDevice(MIDIPort dev) {
  return "name=${dev.name} id=${dev.id} version=${dev.version} manu=${dev.manufacturer} type=${dev.type} ${dev.connection} ${dev.state}";
}

void HandleNewPort(event) {
  print("New Device: ${RenderDevice(event.port)}");
  event.port.addEventListener('midimessage', make_handler(event.port.name));
}

void main() async {
  print("MAIN");
  final opts = MIDIOptions(sysex: false, software: true);
  MIDIAccess access = await window.navigator.requestMIDIAccess(opts);

  access.addEventListener("statechange", HandleNewPort);

  access.inputs.forEach((c, k, m) {
    print("Input Device: ${RenderDevice(c)}");
    c.addEventListener('midimessage', make_handler(c.name));
  });

  access.outputs.forEach((c, k, m) {
    print("Output Device: ${RenderDevice(c)}");
    c.addEventListener('midimessage', make_handler(c.name));
  });
}

robertmuth avatar May 20 '22 21:05 robertmuth

I've tested your code and it is working ok with the latest lib & SDK. Open a new issue if you have problems please

jodinathan avatar Jan 24 '23 12:01 jodinathan