examples(webaudio): Tidy up the webaudio example

examples/webaudio/index.js

@@ -1,40 +1,35 @@
-const rust = import('./webaudio');
+import('./webaudio').then(rust_module => {
+  let fm = null;
 
+  const play_button = document.getElementById("play");
+  play_button.addEventListener("click", event => {
+    if (fm === null) {
+      fm = new rust_module.FmOsc();
+      fm.set_note(50);
+      fm.set_fm_frequency(0);
+      fm.set_fm_amount(0);
+      fm.set_gain(0.8);
+    }
+  });
 
-// Most browsers don't let WebAudio autoplay without some interaction from the user.  So once the module is loaded,
-// it's passed to this function which will set up the UI elements for the user to interact with
-function setup(rust_module) {
-    play = function() {
-            console.log("About to create some music!");
-            fm = new rust_module.FmOsc();
+  const primary_slider = document.getElementById("primary_input");
+  primary_slider.addEventListener("input", event => {
+    if (fm) {
+      fm.set_note(event.target.value);
+    }
+  });
 
-            fm.set_note(50);
-            fm.set_fm_frequency(0);
-            fm.set_fm_amount(0);
-            fm.set_gain(0.8);
+  const fm_freq = document.getElementById("fm_freq");
+  fm_freq.addEventListener("input", event => {
+    if (fm) {
+      fm.set_fm_frequency(event.target.value);
+    }
+  });
 
-    };
-
-    // create some UI elements
-    const primary_slider = document.getElementById("primary_input");
-    primary_slider.oninput = (e) => {
-        fm.set_note(e.target.value);
-    };
-
-    const fm_freq = document.getElementById("fm_freq");
-    fm_freq.oninput = (e) => {
-        fm.set_fm_frequency(e.target.value);
-    };
-
-    const fm_amount = document.getElementById("fm_amount");
-    fm_amount.oninput = (e) => {
-        fm.set_fm_amount(e.target.value);
-    };
-
-    console.log("Ready!  Press the play button!");
-}
-
-
-rust.then(m => {
-    setup(m);
+  const fm_amount = document.getElementById("fm_amount");
+  fm_amount.addEventListener("input", event => {
+    if (fm) {
+      fm.set_fm_amount(event.target.value);
+    }
+  });
 });