Start implementing record function

src/components/Noise.vue

@@ -90,7 +90,7 @@
           >
             <v-card>
               <v-card-title>
-                <span class="text-h5">Profile Name</span>
+                <span class="text-h5">Save Profile As...</span>
               </v-card-title>
               <v-card-text>
                 <v-container>
@@ -168,6 +168,16 @@
                           Export Profile
                         </v-list-item-title>
                       </v-list-item>
+                      <v-list-item
+                        @click="startRecordingDialog = true"
+                      >
+                        <v-list-item-icon>
+                          <v-icon>mdi-record</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>
+                          Record Profile Audio
+                        </v-list-item-title>
+                      </v-list-item>
                     </v-list-item-group>
                   </v-col>
                 </v-row>
@@ -274,6 +284,58 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
+
+        <v-dialog
+          v-model="startRecordingDialog"
+          max-width="600px"
+        >
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">Start Recording</span>
+            </v-card-title>
+            <v-card-text>
+              Start recording the currently playing audio? This is only supported on Chrome and Firefox.
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="startRecordingDialog = false"
+              >
+                Close
+              </v-btn>
+              <v-btn
+                text
+                @click="startRecording"
+              >
+                Record
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+
+        <v-dialog
+          v-model="recordingDialog"
+          max-width="600px"
+        >
+          <v-card>
+            <v-card-title>
+              <span class="text-h5">Recording</span>
+            </v-card-title>
+            <v-card-text>
+              Time Elapsed: {{ recordingTimeElapsed }}
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="stopRecording"
+              >
+                Stop
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
       </v-col>
 
       <v-col cols="12">
@@ -345,7 +407,7 @@
             label="Volume"
             thumb-label
             max="0"
-            min="-30"
+            min="-60"
             class="mx-3"
             @input="updateVolume"
           />
@@ -548,7 +610,7 @@
                 label="Volume"
                 thumb-label
                 max="0"
-                min="-30"
+                min="-60"
                 class="mx-3"
                 @input="updateSampleVolume(sample.id, index)"
               />
@@ -647,7 +709,7 @@
                 <v-container>
                   <v-row>
                     <v-col cols="12">
-                      <p><strong>WARNING:</strong> Uploaded samples are publicly accessible.</p>
+                      <strong>WARNING:</strong> Uploaded samples are publicly accessible.
                     </v-col>
                   </v-row>
                   <v-row>
@@ -711,7 +773,7 @@
           >
             <v-card>
               <v-card-title>
-                <span class="text-h5">Edit Sample</span>
+                <span class="text-h5">Edit Samples</span>
               </v-card-title>
               <v-card-text>
                 <v-container>

src/components/noise.js

@@ -64,6 +64,9 @@ export default {
     previewSampleButtonText: 'Preview Sample',
     previewSampleLoading: true,
     previewSampleLength: 0,
+    startRecordingDialog: false,
+    recordingDialog: false,
+    recordingTimeElapsed: 0,
     errorSnackbar: false,
     errorSnackbarText: '',
     rules: {
@@ -98,6 +101,7 @@ export default {
     this.players = new Tone.Players()
     this.samplePreviewPlayer = new Tone.Player().toDestination()
     this.samplePreviewPlayer.loop = true
+    this.recorder = new Tone.Recorder()
 
     this.populateProfileItems(0)
     this.populatePreviewSampleItems()
@@ -631,6 +635,44 @@ export default {
       if (this.previewSampleLoopStart >= 0 && this.previewSampleLoopEnd <= this.previewSampleLength) {
         this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd)
       }
+    },
+    async startRecording () {
+      this.startRecordingDialog = false
+      this.recordingDialog = true
+      this.recordingTimeElapsed = 0
+
+      if (!this.isFilterEnabled && !this.isTremoloEnabled) {
+        this.noise.connect(this.recorder)
+      } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder)
+      } else if (this.isFilterEnabled && !this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.recorder)
+      } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && !this.isTremoloEnabled) {
+        this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.recorder)
+      } else if (this.isFilterEnabled && this.isLFOFilterCutoffEnabled && this.isTremoloEnabled) {
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder)
+      } else {
+        this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder)
+      }
+
+      this.loadedSamples.forEach(s => {
+        this.players.player(s.id).connect(this.recorder)
+      })
+
+      await this.recorder.start()
+      this.recordingInterval = setInterval(() => this.recordingTimeElapsed++, 1000)
+    },
+    async stopRecording () {
+      const recording = await this.recorder.stop()
+
+      const url = URL.createObjectURL(recording)
+      const anchor = document.createElement('a')
+      anchor.download = this.selectedProfile.text + '.webm'
+      anchor.href = url
+      anchor.click()
+
+      clearInterval(this.recordingInterval)
+      this.recordingDialog = false
     }
   }
 }