external-repos/noisedash
1
0
Fork 1
mirror of https://github.com/kaythomas0/noisedash.git synced 2025-11-14 20:27:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start implementing record function

Browse Source
This commit is contained in:
Kevin Thomas
2022-04-26 19:36:33 -07:00
parent f1db1883f7
commit 232163064e
2 changed files with 109 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Noise.vue
View File

@@ -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>

42
src/components/noise.js
View File

@@ -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
}
}
}