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

MP3 recording

Browse source
This commit is contained in:
N-Pex 2021-12-14 13:14:51 +01:00
parent 44b8c2ef73
commit 54c8b6597d
4 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

28
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.19",
"version": "0.1.21",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -7775,6 +7775,14 @@
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
},
"lamejs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz",
"integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==",
"requires": {
"use-strict": "1.0.1"
}
},
"launch-editor": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.2.1.tgz",
@ -8111,6 +8119,14 @@
"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
"dev": true
},
"mic-recorder-to-mp3": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz",
"integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==",
"requires": {
"lamejs": "^1.2.0"
}
},
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@ -10949,11 +10965,6 @@
"resolve": "^1.1.6"
}
},
"recordrtc": {
"version": "5.6.2",
"resolved": "https://registry.npmjs.org/recordrtc/-/recordrtc-5.6.2.tgz",
"integrity": "sha512-1QNKKNtl7+KcwD1lyOgP3ZlbiJ1d0HtXnypUy7yq49xEERxk31PHvE9RCciDrulPCY7WJ+oz0R9hpNxgsIurGQ=="
},
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -13015,6 +13026,11 @@
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
"dev": true
},
"use-strict": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
"integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A="
},
"util": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.21",
"version": "0.1.22",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
@ -26,10 +26,10 @@
"material-design-icons-iconfont": "^6.1",
"matrix-js-sdk": "^15.2.0",
"md-gum-polyfill": "^1.0.0",
"mic-recorder-to-mp3": "^2.2.2",
"pretty-bytes": "^5.6.0",
"qrcode": "^1.4.4",
"raw-loader": "^4.0.2",
"recordrtc": "^5.6.2",
"roboto-fontface": "*",
"v-emoji-picker": "^2.3.1",
"vue": "^2.6.11",

4
package.json.bak
View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.20",
"version": "0.1.21",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
@ -26,10 +26,10 @@
"material-design-icons-iconfont": "^6.1",
"matrix-js-sdk": "^15.2.0",
"md-gum-polyfill": "^1.0.0",
"mic-recorder-to-mp3": "^2.2.2",
"pretty-bytes": "^5.6.0",
"qrcode": "^1.4.4",
"raw-loader": "^4.0.2",
"recordrtc": "^5.6.2",
"roboto-fontface": "*",
"v-emoji-picker": "^2.3.1",
"vue": "^2.6.11",

57
src/components/VoiceRecorder.vue
View file

@ -150,8 +150,9 @@ const State = {
import util from "../plugins/utils";
import VoiceRecorderLock from "./VoiceRecorderLock";
require("md-gum-polyfill");
import RecordRTC from "recordrtc";
import MicRecorder from "mic-recorder-to-mp3";
import ysFixWebmDuration from "fix-webm-duration";
//import { duration } from "dayjs";
export default {
name: "VoiceRecorder",
@ -161,19 +162,19 @@ export default {
props: {
show: {
type: Boolean,
default: function () {
default: function() {
return false;
},
},
ptt: {
type: Boolean,
default: function () {
default: function() {
return false;
},
},
micButtonRef: {
type: Object,
default: function () {
default: function() {
return null;
},
},
@ -328,25 +329,13 @@ export default {
},
startRecording() {
var constraints = {
audio: {
// channelCount: 1,
// sampleRate: 16000,
echoCancellation: false,
autoGainControl: true,
noiseSuppression: true,
volume: 1.0,
},
video: false,
};
navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
this.recorder = RecordRTC(stream, {
type: "audio",
mimeType: "audio/webm",
});
this.recorder.startRecording();
// Start recording. Browser will request permission to use your microphone.
this.recorder = new MicRecorder({
bitRate: 128,
});
this.recorder
.start()
.then(() => {
this.state = State.RECORDING;
this.recordStartedAt = Date.now();
this.startRecordTimer();
@ -363,7 +352,7 @@ export default {
this.state = State.INITIAL;
if (this.recorder) {
this.recorder.stopRecording();
this.recorder.destroy();
//this.recorder.destroy();
this.recorder = null;
}
this.stopRecordTimer();
@ -391,25 +380,25 @@ export default {
this.$emit("file", { file: this.recordedFile });
},
getFile(send) {
const duration = Date.now() - this.recordStartedAt;
this.recorder.stopRecording(() => {
this.correctMetadata(this.recorder.getBlob(), duration).then((blob) => {
//const duration = Date.now() - this.recordStartedAt;
this.recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
// do what ever you want with buffer and blob
// Example: Create a mp3 file and play
this.recordedFile = new File(
[blob],
util.formatRecordStartTime(this.recordStartedAt) + ".webm",
buffer,
util.formatRecordStartTime(this.recordStartedAt) + ".mp3",
{
type: blob.type,
lastModified: Date.now(),
}
);
//const player = new Audio(URL.createObjectURL(this.recordedFile));
//player.play();
if (send) {
//console.log("send");
this.send();
}
});
});
},
startRecordTimer() {
this.stopRecordTimer();
@ -436,7 +425,7 @@ export default {
async correctMetadata(blob, duration) {
return new Promise((resolve, reject) => {
try {
ysFixWebmDuration(blob, duration, function (fixedBlob) {
ysFixWebmDuration(blob, duration, function(fixedBlob) {
const b = new Blob([fixedBlob], { type: blob.type });
resolve(b);
});