diff --git a/src/components/Noise.vue b/src/components/Noise.vue index e6e83ee..1136d37 100644 --- a/src/components/Noise.vue +++ b/src/components/Noise.vue @@ -95,13 +95,11 @@ - - - + @@ -169,7 +167,7 @@ mdi-record @@ -262,7 +260,6 @@ :items="profileItems" return-object label="Profiles" - class="mx-3 mb-5" /> @@ -289,29 +286,54 @@ v-model="startRecordingDialog" max-width="600px" > - - - Start Recording - - - Start recording the currently playing audio? This is only supported on Chrome and Firefox. - - - - - Close - - - Record - - - + + + + Start Recording + + + + +

Select profile to record audio for. This is only supported on Chrome and Firefox.

+
+ + + + + + +
+
+ + + + Close + + + Record + + +
+
Recording - Time Elapsed: {{ recordingTimeElapsed }} + Time Elapsed: {{ recordingTimeElapsed }} Seconds @@ -708,9 +730,7 @@ - - WARNING: Uploaded samples are publicly accessible. - +

WARNING: Uploaded samples are publicly accessible.

- - - +
@@ -784,7 +802,6 @@ item-text="name" return-object label="Samples" - class="mx-3" @change="loadPreviewSample" /> @@ -798,7 +815,6 @@ v-model="previewSampleLoopPointsEnabled" :disabled="previewSamplePlaying" label="Use Loop Points" - class="mx-3" /> @@ -807,7 +823,7 @@ v-model="previewSampleLoopStart" type="number" label="Loop Start Time" - class="mx-3" + class="mr-3" :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying" :rules="[rules.gt(-1)]" @change="updatePreviewSamplePlayerLoopPoints" @@ -817,7 +833,7 @@ v-model="previewSampleLoopEnd" type="number" label="Loop End Time" - class="mx-3" + class="ml-3" :disabled="!previewSampleLoopPointsEnabled || previewSamplePlaying" :rules="[rules.gt(-1), rules.lt(previewSampleLength)]" @change="updatePreviewSamplePlayerLoopPoints" @@ -829,7 +845,6 @@ v-model="previewSampleFadeIn" type="number" label="Fade In Time" - class="mx-3" :disabled="previewSamplePlaying" :rules="[rules.gt(-1)]" @change="updatePreviewSamplePlayerFadeIn" diff --git a/src/components/noise.js b/src/components/noise.js index e671fb8..ae80690 100644 --- a/src/components/noise.js +++ b/src/components/noise.js @@ -67,6 +67,9 @@ export default { startRecordingDialog: false, recordingDialog: false, recordingTimeElapsed: 0, + recordedProfile: {}, + recordingFileName: '', + isRecordingValid: false, errorSnackbar: false, errorSnackbarText: '', rules: { @@ -253,6 +256,7 @@ export default { this.selectedProfile = this.profileItems.find(p => p.id === profileId) } this.exportedProfile = this.profileItems[0] + this.recordedProfile = this.profileItems[0] this.loadProfile() } } @@ -487,7 +491,7 @@ export default { } }) .catch(() => { - this.errorSnackbarText = 'Error Saving Profile' + this.errorSnackbarText = 'Error Importing Profile' this.errorSnackbar = true }) @@ -540,7 +544,7 @@ export default { } }) .catch(() => { - this.errorSnackbarText = 'Error Loading Profile' + this.errorSnackbarText = 'Error Exporting Profile' this.errorSnackbar = true }) @@ -636,43 +640,104 @@ export default { this.samplePreviewPlayer.setLoopPoints(this.previewSampleLoopStart, this.previewSampleLoopEnd) } }, - async startRecording () { - this.startRecordingDialog = false - this.recordingDialog = true - this.recordingTimeElapsed = 0 + openStartRecordingDialog () { + this.startRecordingDialog = true + this.profileMoreDialog = false + }, + startRecording () { + this.$http.get('/profiles/'.concat(this.recordedProfile.id)) + .then(async response => { + if (response.status === 200) { + const profile = response.data.profile + + this.isTimerEnabled = profile.isTimerEnabled + this.duration = profile.duration + this.volume = profile.volume + this.noiseColor = profile.noiseColor + this.isFilterEnabled = profile.isFilterEnabled + this.filterType = profile.filterType + this.filterCutoff = profile.filterCutoff + this.isLFOFilterCutoffEnabled = profile.isLFOFilterCutoffEnabled + this.lfoFilterCutoffFrequency = profile.lfoFilterCutoffFrequency + this.lfoFilterCutoffRange[0] = profile.lfoFilterCutoffLow + this.lfoFilterCutoffRange[1] = profile.lfoFilterCutoffHigh + this.isTremoloEnabled = profile.isTremoloEnabled + this.tremoloFrequency = profile.tremoloFrequency + this.tremoloDepth = profile.tremoloDepth + + this.loadedSamples = profile.samples + + this.startRecordingDialog = false + this.recordingDialog = true + this.recordingTimeElapsed = 0 + + await this.recorder.start() + this.recordingInterval = setInterval(() => this.recordingTimeElapsed++, 1000) + this.playProfileForRecording() + } + }) + .catch(() => { + this.errorSnackbarText = 'Error Recording Profile' + this.errorSnackbar = true + }) + }, + playProfileForRecording () { + this.playDisabled = true + Tone.Transport.cancel() if (!this.isFilterEnabled && !this.isTremoloEnabled) { - this.noise.connect(this.recorder) + this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.recorder).toDestination() } 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) + this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start() + this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.tremolo) + } else if (this.isFilterEnabled && !this.isTremoloEnabled) { + this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.recorder).toDestination() + this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter) + } else if (this.isFilterEnabled && this.isTremoloEnabled) { + this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start() + this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo) + this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter) } else { - this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder) + this.tremolo = new Tone.Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).connect(this.recorder).toDestination().start() + this.filter = new Tone.Filter(this.filterCutoff, this.filterType).connect(this.tremolo) + this.noise = new Tone.Noise({ volume: this.volume, type: this.noiseColor }).connect(this.filter) + } + + if (this.isLFOFilterCutoffEnabled) { + this.lfo = new Tone.LFO({ frequency: this.lfoFilterCutoffFrequency, min: this.lfoFilterCutoffRange[0], max: this.lfoFilterCutoffRange[1] }) + this.lfo.connect(this.filter.frequency).start() } this.loadedSamples.forEach(s => { + this.players.player(s.id).loop = true + this.players.player(s.id).fadeIn = s.fadeIn + if (s.loopPointsEnabled) { + this.players.player(s.id).setLoopPoints(s.loopStart, s.loopEnd) + } + this.players.player(s.id).volume.value = s.volume + this.players.player(s.id).connect(this.recorder) + this.players.player(s.id).unsync().sync().start(0) }) - await this.recorder.start() - this.recordingInterval = setInterval(() => this.recordingTimeElapsed++, 1000) + this.noise.sync().start(0) + + Tone.Transport.start() }, async stopRecording () { const recording = await this.recorder.stop() + this.loadProfile() + const url = URL.createObjectURL(recording) const anchor = document.createElement('a') - anchor.download = this.selectedProfile.text + '.webm' + anchor.download = this.recordingFileName + '.webm' anchor.href = url anchor.click() clearInterval(this.recordingInterval) this.recordingDialog = false + this.stop() } } }