ifredom / tonejs_meets_flutterweb

Tone.js meets Flutter Web (A simple piano demo)

Home Page:https://modulovalue.com/tonejs_meets_flutterweb/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tone.js meets Flutter Web (A simple piano demo)

License Github Stars Twitter Follow GitHub Follow

A quick and dirty demo on how to use a JavaScript library with Flutter Web

tonejs_meets_flutterweb (Please use Google Chrome)

Screenshot

How to use JavaScript in your Flutter Web App. (It's really easy)

  1. Add the JavaScript to your web/index.html

(In this case tone.js)

...
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.4.9/Tone.js" type="application/javascript"></script>
  <script src="main.dart.js" type="application/javascript"></script>
  <script>
    function playNote(note, duration) {
      var synth = new Tone.Synth().toDestination();
      synth.triggerAttackRelease(note, duration);
    }
  </script>
</body>
...
  1. Call your JavaScript in Dart
import 'dart:js' as js;
...
js.context.callMethod("playNote", ["C5", "8n"])

Easy!

About

Tone.js meets Flutter Web (A simple piano demo)

https://modulovalue.com/tonejs_meets_flutterweb/

License:MIT License


Languages

Language:Dart 87.3%Language:HTML 12.7%