优化: h5录音时出现电流声

im-uniapp/common/recorder-app.js

@@ -62,7 +62,6 @@ let upload = () => {
 
 export {
 	start,
-	pause,
 	close,
 	upload
 }

im-uniapp/common/recorder-h5.js

@@ -1,30 +1,43 @@
-import Recorder from 'js-audio-recorder';
 import UNI_APP from '@/.env.js';
 
 let rc = null;
+let duration = 0;
+let chunks = [];
+let stream = null;
 let start = () => {
-	if (rc != null) {
-		close();
+	return navigator.mediaDevices.getUserMedia({ audio: true }).then(audioStream => {
+		const startTime = new Date().getTime();
+		chunks = [];
+		stream = audioStream;
+		rc = new MediaRecorder(stream)
+		rc.ondataavailable = (e) => {
+			console.log("ondataavailable")
+			chunks.push(e.data)
 		}
-	rc = new Recorder();
-	return rc.start();
-}
+		rc.onstop = () => {
+			duration = (new Date().getTime() - startTime) / 1000;
+			console.log("时长：", duration)
+		}
+		rc.start()
+	})
 
-let pause = () => {
-	rc.pause();
 }
 
 let close = () => {
-	rc.destroy();
-	rc = null;
+	stream.getTracks().forEach((track) => {
+		track.stop()
+	})
+	rc.stop()
 }
 
+
 let upload = () => {
 	return new Promise((resolve, reject) => {
-		const wavBlob = rc.getWAVBlob();
-		const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
-		const name = new Date().getDate() + '.wav';
+		setTimeout(() => {
+			const newbolb = new Blob(chunks, { 'type': 'audio/mpeg' });
+			const name = new Date().getDate() + '.mp3';
 			const file = new File([newbolb], name)
+			console.log("upload")
 			uni.uploadFile({
 				url: UNI_APP.BASE_URL + '/file/upload',
 				header: {
@@ -39,7 +52,7 @@ let upload = () => {
 						reject(r.message);
 					} else {
 						const data = {
-						duration: parseInt(rc.duration),
+							duration: parseInt(duration),
 							url: r.data
 						}
 						resolve(data);
@@ -49,12 +62,12 @@ let upload = () => {
 					reject(e);
 				}
 			})
+		}, 100)
 	})
 }
 
 export {
 	start,
-	pause,
 	close,
 	upload
 }

im-uniapp/components/chat-record/chat-record.vue

@@ -71,13 +71,12 @@ export default {
 		},
 		onEndRecord() {
 			this.recording = false;
-			// 停止录音
-			this.$rc.pause();
 			// 停止计时
 			this.StopTimer();
+			// 停止录音
+			this.$rc.close();
 			// 触屏位置是否移动到了取消区域
 			if (this.moveToCancel) {
-				this.$rc.close();
 				console.log("录音取消")
 				return;
 			}
@@ -87,7 +86,6 @@ export default {
 					title: "说话时间太短",
 					icon: 'none'
 				})
-				this.$rc.close();
 				return;
 			}
 			this.$rc.upload().then((data) => {

im-uniapp/package.json

@@ -4,7 +4,6 @@
 		"scripts": {}
 	},
 	"dependencies": {
-		"js-audio-recorder": "^1.0.7",
 		"pinyin-pro": "^3.23.1",
 		"vconsole": "^3.15.1"
 	}