butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Audio imported: support pause/play and stop playing after send

Browse source
This commit is contained in:
10G Meow 2023-08-20 11:45:57 +03:00
parent d3000e4672
commit d9b4b2dd99
1 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/VoiceRecorder.vue
View file

@ -25,6 +25,9 @@
<v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio"> <v-btn v-show="state == states.IMPORTED" icon @click.stop="previewAudio">
<v-icon color="white">$vuetify.icons.audio_import_play</v-icon> <v-icon color="white">$vuetify.icons.audio_import_play</v-icon>
</v-btn> </v-btn>
<v-btn v-show="state == states.PLAYING" icon @click.stop="pauseAudio">
<v-icon color="white">pause</v-icon>
</v-btn>
</v-col> </v-col>
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-btn <v-btn
@ -37,7 +40,7 @@
<v-icon color="white">stop</v-icon> <v-icon color="white">stop</v-icon>
</v-btn> </v-btn>
<v-btn <v-btn
v-else-if="state == states.RECORDED || state == states.IMPORTED" v-else-if="state == states.RECORDED || state == states.IMPORTED || state == states.PLAYING"
id="btn-send" id="btn-send"
class="voice-recorder-btn recorded" class="voice-recorder-btn recorded"
icon icon
@ -159,7 +162,8 @@ const State = {
RECORDING: "recording", RECORDING: "recording",
RECORDED: "recorded", RECORDED: "recorded",
ERROR: "error", ERROR: "error",
IMPORTED: "imported" IMPORTED: "imported",
PLAYING: "playing"
}; };
import util from "../plugins/utils"; import util from "../plugins/utils";
import VoiceRecorderLock from "./VoiceRecorderLock"; import VoiceRecorderLock from "./VoiceRecorderLock";
@ -253,6 +257,7 @@ export default {
this.state = State.INITIAL; this.state = State.INITIAL;
this.errorMessage = null; this.errorMessage = null;
this.recordedFile = null; this.recordedFile = null;
this.previewPlayer = null;
this.recordingTime = String.fromCharCode(160); this.recordingTime = String.fromCharCode(160);
if (this.usePTT) { if (this.usePTT) {
document.addEventListener("mouseup", this.mouseUp, false); document.addEventListener("mouseup", this.mouseUp, false);
@ -321,6 +326,9 @@ export default {
this.stopRecordTimer(); this.stopRecordTimer();
this.recordingTime = String.fromCharCode(160); // nbsp; this.recordingTime = String.fromCharCode(160); // nbsp;
this.$emit("close"); this.$emit("close");
this.previewPlayer = null;
this.recordedFile = null;
this.$refs.audio_import.value = null;
}, },
mouseUp(ignoredEvent) { mouseUp(ignoredEvent) {
document.removeEventListener("mouseup", this.mouseUp, false); document.removeEventListener("mouseup", this.mouseUp, false);
@ -385,7 +393,7 @@ export default {
}); });
}, },
screenLocked() { screenLocked() {
if (document.visibilityState === "hidden" && this.state == State.RECORDING) { if (document.visibilityState === "hidden" && this.state == State.RECORDING) {
this.pauseRecording(); this.pauseRecording();
} }
}, },
@ -451,6 +459,8 @@ export default {
}, },
send() { send() {
this.$emit("file", { file: this.recordedFile }); this.$emit("file", { file: this.recordedFile });
this.previewPlayer.pause();
this.$refs.audio_import.value = null;
}, },
getFile(send) { getFile(send) {
const duration = Date.now() - this.recordStartedAt; const duration = Date.now() - this.recordStartedAt;
@ -532,6 +542,7 @@ export default {
}, },
previewAudio() { previewAudio() {
this.state = State.PLAYING;
if (this.recordedFile) { if (this.recordedFile) {
if (!this.previewPlayer) { if (!this.previewPlayer) {
this.previewPlayer = new Audio(); this.previewPlayer = new Audio();
@ -543,6 +554,10 @@ export default {
}; };
reader.readAsDataURL(this.recordedFile); reader.readAsDataURL(this.recordedFile);
} }
},
pauseAudio() {
this.state = State.IMPORTED;
this.previewPlayer.pause();
} }
}, },
}; };