Add import functionality to voice recorder
This commit is contained in:
N-Pex
parent
9812476b89
commit
b61714fccf
3 changed files with 75 additions and 3 deletions
9
src/assets/icons/audio_import.vue
Normal file
9
src/assets/icons/audio_import.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M34.5045 2.00009C34.4955 1.99996 34.4865 1.99996 34.4773 2.00022C34.472 2.00022 34.4667 2.00009 34.4614 2.00022V2.00009H34.4468L34.4321 2.00191C34.3889 2.00685 34.3463 2.01738 34.3055 2.03338L34.3047 2.03364L34.3042 2.0339L22.3976 6.75159L22.3971 6.75172L22.3966 6.75198C22.2004 6.83079 22.0788 7.01118 22.08 7.22109H22.0798V7.22369C22.0796 10.8211 22.0798 14.4168 22.0798 18.0165C21.4362 17.3614 20.5389 16.9551 19.5466 16.9551C17.595 16.9551 16 18.5363 16 20.4775C16 22.4169 17.5946 24 19.5466 24C21.4924 24 23.0798 22.4297 23.0932 20.5018C23.0932 20.4994 23.0933 20.497 23.0933 20.4946H23.0932C23.0933 20.489 23.0933 20.4833 23.0932 20.4777H23.0933V10.8472L33.9865 6.7827V13.6522C33.3419 12.9981 32.4433 12.5915 31.4533 12.5915C29.4988 12.5915 27.9067 14.1736 27.9067 16.1139C27.9067 18.0522 29.4987 19.6364 31.4533 19.6364C33.3813 19.6364 34.9586 18.0837 34.9999 16.1792L35 16.1764V2.50378V2.50365C35.0001 2.22209 34.7842 2.00541 34.5048 2.00035L34.5045 2.00009Z"
|
||||
fill="white" />
|
||||
<rect x="15" y="6" width="3" height="15" rx="1.3" transform="rotate(90 15 6)" fill="white" />
|
||||
<rect x="6" width="3" height="15" rx="1.3" fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/audio_import_play.vue
Normal file
7
src/assets/icons/audio_import_play.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M15.2035 11.7865L1.92305 20.668C0.860979 21.3783 0 20.9103 0 19.6316V1.36924C0 0.0865306 0.861044 -0.377469 1.92305 0.33277L15.2035 9.21432C16.2655 9.9246 16.2655 11.0762 15.2035 11.7865Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -11,6 +11,20 @@
|
|||
<v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
|
||||
<v-icon color="white">undo</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-show="state == states.INITIAL" icon @click.stop="importAudio">
|
||||
<v-icon color="white">$vuetify.icons.audio_import</v-icon>
|
||||
<input
|
||||
ref="audio_import"
|
||||
type="file"
|
||||
name="audio_import"
|
||||
@change="handleAudioImport($event)"
|
||||
accept="audio/*"
|
||||
class="d-none"
|
||||
/>
|
||||
</v-btn>
|
||||
<v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
|
||||
<v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="4" align="center">
|
||||
<v-btn
|
||||
|
|
@ -23,7 +37,7 @@
|
|||
<v-icon color="white">stop</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else-if="state == states.RECORDED"
|
||||
v-else-if="state == states.RECORDED || state == states.IMPORTED"
|
||||
id="btn-send"
|
||||
class="voice-recorder-btn recorded"
|
||||
icon
|
||||
|
|
@ -145,6 +159,7 @@ const State = {
|
|||
RECORDING: "recording",
|
||||
RECORDED: "recorded",
|
||||
ERROR: "error",
|
||||
IMPORTED: "imported"
|
||||
};
|
||||
import util from "../plugins/utils";
|
||||
import VoiceRecorderLock from "./VoiceRecorderLock";
|
||||
|
|
@ -192,7 +207,8 @@ export default {
|
|||
recordingLocked: false,
|
||||
recordedFile: null,
|
||||
errorMessage: null,
|
||||
recorder: null
|
||||
recorder: null,
|
||||
previewPlayer: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -242,8 +258,10 @@ export default {
|
|||
this.startRecording();
|
||||
} else {
|
||||
console.log("Not PTT");
|
||||
if (this.micButtonRef) {
|
||||
//eslint-disable-next-line
|
||||
this.micButtonRef.$el.style.display = "none";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Remove listeners
|
||||
|
|
@ -257,10 +275,17 @@ export default {
|
|||
this.startCoordinateX = null;
|
||||
this.startCoordinateY = null;
|
||||
this.recordingLocked = false;
|
||||
if (this.micButtonRef) {
|
||||
//eslint-disable-next-line
|
||||
this.micButtonRef.$el.style.display = "block";
|
||||
}
|
||||
}
|
||||
},
|
||||
state() {
|
||||
if (this.state != State.IMPORTED && this.previewPlayer) {
|
||||
this.previewPlayer.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lockButtonStyle() {
|
||||
|
|
@ -351,10 +376,10 @@ export default {
|
|||
},
|
||||
cancelRecording() {
|
||||
if(this.recorder) {
|
||||
this.state = State.INITIAL;
|
||||
this.recorder.stop();
|
||||
this.recorder = null;
|
||||
}
|
||||
this.state = State.INITIAL;
|
||||
this.close();
|
||||
},
|
||||
pauseRecording() {
|
||||
|
|
@ -433,6 +458,37 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show import picker to select file
|
||||
*/
|
||||
importAudio() {
|
||||
this.$refs.audio_import.click();
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle picked audio file
|
||||
*/
|
||||
handleAudioImport(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
this.recordedFile = event.target.files[0];
|
||||
this.state = State.IMPORTED;
|
||||
}
|
||||
},
|
||||
|
||||
previewAudio() {
|
||||
if (this.recordedFile) {
|
||||
if (!this.previewPlayer) {
|
||||
this.previewPlayer = new Audio();
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.previewPlayer.src = e.target.result;
|
||||
this.previewPlayer.play();
|
||||
};
|
||||
reader.readAsDataURL(this.recordedFile);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue