diff --git a/src/components/Noise.vue b/src/components/Noise.vue index 0e05b1c..e6e83ee 100644 --- a/src/components/Noise.vue +++ b/src/components/Noise.vue @@ -90,7 +90,7 @@ > - Profile Name + Save Profile As... @@ -168,6 +168,16 @@ Export Profile + + + mdi-record + + + Record Profile Audio + + @@ -274,6 +284,58 @@ + + + + + Start Recording + + + Start recording the currently playing audio? This is only supported on Chrome and Firefox. + + + + + Close + + + Record + + + + + + + + + Recording + + + Time Elapsed: {{ recordingTimeElapsed }} + + + + + Stop + + + + @@ -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 @@ -

WARNING: Uploaded samples are publicly accessible.

+ WARNING: Uploaded samples are publicly accessible.
@@ -711,7 +773,7 @@ > - Edit Sample + Edit Samples diff --git a/src/components/noise.js b/src/components/noise.js index 8a2b383..e671fb8 100644 --- a/src/components/noise.js +++ b/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 } } }