Add duration setting

src/components/Noise.vue

@@ -1,6 +1,21 @@
 <template>
   <v-container>
     <v-row class="text-center">
+      <v-col cols="12">
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        />
+      </v-col>
+
+      <v-col class="mb-4">
+        <h1 class="display-2 font-weight-bold mb-3">
+          Welcome to Noisedash
+        </h1>
+      </v-col>
+
       <v-col cols="12">
         <v-btn
           :disabled="isDisabled"
@@ -9,6 +24,7 @@
           Start
         </v-btn>
       </v-col>
+
       <v-col cols="12">
         <v-btn
           @click="handleStop"
@@ -16,6 +32,13 @@
           Stop
         </v-btn>
       </v-col>
+
+      <v-col cols="12">
+        <v-text-field
+          v-model="seconds"
+          label="Seconds"
+        />
+      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -27,18 +50,19 @@
     name: 'Noise',
 
     data: () => ({
-      isDisabled: false
+      isDisabled: false,
+      seconds: 4
     }),
     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.cancel()
+        this.noise = new Noise({volume: -10, type: "brown"}).toDestination()
+        this.noise.sync().start(0).stop(this.seconds)
         Transport.start()
+        Transport.loopEnd = this.seconds
       },
       handleStop() {
         Transport.stop()