Add Noise and Transport components

package-lock.json

@@ -1061,7 +1061,6 @@
       "version": "7.14.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
       "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -2367,6 +2366,22 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "automation-events": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.3.tgz",
+      "integrity": "sha512-FVIO4QTVi4u4ORRMszcXhoUj1U8rtgIVCbMKgw1i/zlcbEn1MICbhfquDJiA1QZgh0KysUGuxrn2JeloH04drQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.6",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -9589,8 +9604,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -10666,6 +10680,23 @@
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
       "dev": true
     },
+    "standardized-audio-context": {
+      "version": "25.2.9",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.2.9.tgz",
+      "integrity": "sha512-8xRl8Cqv3j8UZdRvAYhgqSpVRntjxUBxute+9Zg8zeXTr+aRfDgbAu5FHzTLpUlu8uAJ9232CdOOMkTceSNAWA==",
+      "requires": {
+        "@babel/runtime": "^7.14.6",
+        "automation-events": "^4.0.3",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -11203,6 +11234,22 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
+    "tone": {
+      "version": "14.7.77",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
+      "integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
+      "requires": {
+        "standardized-audio-context": "^25.1.8",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "tone": "^14.7.77",
     "vue": "^2.6.11",
     "vuetify": "^2.4.0"
   },

src/App.vue

@@ -39,18 +39,21 @@
 
     <v-main>
       <HelloWorld />
+      <Noise />
     </v-main>
   </v-app>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld';
+import Noise from './components/Noise';
 
 export default {
   name: 'App',
 
   components: {
     HelloWorld,
+    Noise,
   },
 
   data: () => ({

src/components/Noise.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-btn
+          :disabled="isDisabled"
+          @click="handleStart"
+        >
+          Start
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <v-btn
+          @click="handleStop"
+        >
+          Stop
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  import { Noise, Transport } from "tone";
+
+  export default {
+    name: 'Noise',
+
+    data: () => ({
+      isDisabled: false
+    }),
+    created() {
+      this.noise = new Noise({volume: -10, type: "brown"}).toDestination()
+    },
+    methods: {
+      handleStart() {
+        this.isDisabled = true
+        Transport.scheduleOnce((time) => {
+          this.noise.start(time).stop(time + 2)
+        })
+        Transport.start()
+      },
+      handleStop() {
+        Transport.stop()
+        this.isDisabled = false
+      }
+    },
+  }
+</script>