MP3 recording

src/components/VoiceRecorder.vue

@@ -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);
           });
@@ -474,4 +463,4 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-</style> 
+</style>