Add duration setting

src/App.vue

@@ -1,58 +1,18 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer />
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
     <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,
   },
 

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()