Add Noise and Transport components

This commit is contained in:
KevinNThomas
2021-07-17 22:30:40 -07:00
parent 22f9d5f118
commit ad9cb7a6f8
4 changed files with 103 additions and 3 deletions

53
package-lock.json generated
View File

@@ -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==",
"dev": true
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
},
"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",

View File

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

View File

@@ -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: () => ({

49
src/components/Noise.vue Normal file
View File

@@ -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>