测试录音

package-lock.json

@@ -15,6 +15,7 @@
         "eventemitter3": "^5.0.0",
         "howler": "^2.2.3",
         "html2canvas": "^1.4.1",
+        "js-audio-recorder": "^1.0.7",
         "lodash": "^4.17.21",
         "plyr": "^3.7.8",
         "query-string": "^8.1.0",
@@ -3388,6 +3389,11 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "node_modules/js-audio-recorder": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz",
+      "integrity": "sha512-JiDODCElVHGrFyjGYwYyNi7zCbKk9va9C77w+zCPMmi4C6ix7zsX2h3ddHugmo4dOTOTCym9++b/wVW9nC0IaA=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6985,6 +6991,11 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "js-audio-recorder": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz",
+      "integrity": "sha512-JiDODCElVHGrFyjGYwYyNi7zCbKk9va9C77w+zCPMmi4C6ix7zsX2h3ddHugmo4dOTOTCym9++b/wVW9nC0IaA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "eventemitter3": "^5.0.0",
     "howler": "^2.2.3",
     "html2canvas": "^1.4.1",
+    "js-audio-recorder": "^1.0.7",
     "lodash": "^4.17.21",
     "plyr": "^3.7.8",
     "query-string": "^8.1.0",

src/view/evaluating/index.tsx

@@ -28,6 +28,7 @@ import { usePageVisibility } from "@vant/use";
 import { browser } from "/src/utils";
 import { getAudioCurrentTime, setAudioCurrentTime, toggleMutePlayAudio } from "../audio-list";
 import testAudio from "./testAudio.mp3";
+import { createRecordAudio, startRecordingAudio, stopRecordingAudio } from "./recordAudio";
 
 const browserInfo = browser();
 export const evaluatingData = reactive({
@@ -213,13 +214,16 @@ export const handleStartBegin = async () => {
 		// console.log("🚀 ~ content:", evaluatingData.contentData, JSON.stringify(evaluatingData.contentData));
 	} catch (error) {}
 	const res = await startEvaluating(evaluatingData.contentData);
-	if (res?.api !== "startEvaluating") {
-		Snackbar.error("请在APP端进行评测");
-		evaluatingData.startBegin = false;
-		return;
-	}
+	startRecordingAudio();
+	evaluatingData.startBegin = true
+	// if (res?.api !== "startEvaluating") {
+	// 	Snackbar.error("请在APP端进行评测");
+	// 	evaluatingData.startBegin = false;
+	// 	return;
+	// }
 	// 开始录音
-	api_startRecording();
+	// api_startRecording();
+	
 };
 
 /** 播放音乐 */
@@ -306,7 +310,8 @@ export const handleEndEvaluat = (isComplete = false) => {
 	if (!evaluatingData.startBegin || state.modeType !== "evaluating") return;
 	evaluatingData.startBegin = false;
 	// 结束录音
-	api_stopRecording();
+	// api_stopRecording();
+	stopRecordingAudio();
 	// 结束评测
 	endEvaluating({
 		musicScoreId: state.examSongId,
@@ -423,6 +428,7 @@ export default defineComponent({
 				handleEndBegin();
 			}
 		});
+
 		onMounted(() => {
 			hanlde_record();
 			evaluatingData.resultData = {};
@@ -440,14 +446,7 @@ export default defineComponent({
 			}
 			console.log("加载评测模块成功");
 
-			//@ts-ignore
-			if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-				// 浏览器支持音频录制
-				console.log('浏览器支持音频录制');
-			  } else {
-				// 浏览器不支持音频录制
-				console.log('浏览器不支持音频录制');
-			  }
+			createRecordAudio();
 		});
 		onUnmounted(() => {
 			removeResult(handleScoreResult);

src/view/evaluating/recordAudio.ts

@@ -0,0 +1,37 @@
+import Recorder from "js-audio-recorder";
+let mediaRecorder: Recorder | null;
+let chunks: Blob[] = [];
+
+/**
+ * 1. 检测是否支持录音
+ * 2. 获取音频流
+ * 3. 创建 MediaRecorder 对象
+ * 4. 监听录音事件
+ * 5. 开始录音
+ */
+export function createRecordAudio() {
+	if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+		console.log("浏览器不支持录音");
+		return;
+	}
+	mediaRecorder = new Recorder();
+	mediaRecorder.onprogress = (payload: any) => {
+		console.log(payload);
+	};
+	console.log("🚀 ~ mediaRecorder:", mediaRecorder);
+}
+
+// 开始录制
+export function startRecordingAudio() {
+	mediaRecorder?.start();
+}
+
+// 停止录制
+export function stopRecordingAudio() {
+	mediaRecorder?.stop();
+	mediaRecorder?.downloadWAV("test.wav");
+	setTimeout(() => {
+		let wavBlob = mediaRecorder?.getWAVBlob();
+		console.log(wavBlob);
+	}, 1000);
+}