优化: 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,60 +1,73 @@
-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();
-	}
-	rc = new Recorder();
-	return rc.start();
-}
+	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.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';
-		const file = new File([newbolb], name)
-		uni.uploadFile({
-			url: UNI_APP.BASE_URL + '/file/upload',
-			header: {
-				accessToken: uni.getStorageSync("loginInfo").accessToken
-			},
-			file: file,
-			name: 'file',
-			success: (res) => {
-				let r = JSON.parse(res.data);
-				if (r.code != 200) {
-					console.log(res)
-					reject(r.message);
-				} else {
-					const data = {
-						duration: parseInt(rc.duration),
-						url: r.data
+		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: {
+					accessToken: uni.getStorageSync("loginInfo").accessToken
+				},
+				file: file,
+				name: 'file',
+				success: (res) => {
+					let r = JSON.parse(res.data);
+					if (r.code != 200) {
+						console.log(res)
+						reject(r.message);
+					} else {
+						const data = {
+							duration: parseInt(duration),
+							url: r.data
+						}
+						resolve(data);
 					}
-					resolve(data);
+				},
+				fail: (e) => {
+					reject(e);
 				}
-			},
-			fail: (e) => {
-				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"
 	}