Skip to content

modulovalue/tonejs_meets_flutterweb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published