diff --git a/src/components/Noise.vue b/src/components/Noise.vue
index af80730..fd3fbc0 100644
--- a/src/components/Noise.vue
+++ b/src/components/Noise.vue
@@ -78,47 +78,4 @@
-
+
diff --git a/src/components/noise.js b/src/components/noise.js
new file mode 100644
index 0000000..719d4c2
--- /dev/null
+++ b/src/components/noise.js
@@ -0,0 +1,42 @@
+import { Noise, Transport } from "tone";
+
+export default {
+ name: "Noise",
+
+ data: () => ({
+ startDisabled: false,
+ noiseDuration: 4,
+ timeRemaining: 0,
+ noiseColorOptions: ["pink", "white", "brown"],
+ noiseColor: "pink",
+ noiseVolume: -10
+ }),
+ created() {
+ this.noise = new Noise()
+ },
+ methods: {
+ handleStart() {
+ this.startDisabled = true
+ Transport.cancel()
+ this.noise = new Noise({volume: this.noiseVolume, type: this.noiseColor}).toDestination()
+ this.noise.sync().start(0).stop(this.noiseDuration)
+ Transport.start()
+ Transport.loopEnd = this.noiseDuration
+ this.transportInterval = setInterval(() => this.stopTransport(), this.noiseDuration * 1000 + 100)
+
+ this.timeRemaining = this.noiseDuration
+ this.timeRemainingInterval = setInterval(() => this.timer(), 1000)
+ },
+ stopTransport() {
+ clearInterval(this.transportInterval)
+ Transport.stop()
+ this.startDisabled = false
+
+ clearInterval(this.timeRemainingInterval)
+ this.timeRemaining = 0
+ },
+ timer() {
+ this.timeRemaining -= 1
+ }
+ },
+}