初始化

src/composables/useRecording.js

@@ -0,0 +1,56 @@
+import { ref } from "vue"
+import { message } from "ant-design-vue"
+
+export function useRecording() {
+  const isRecording = ref(false)
+  const mediaRecorder = ref(null)
+  const audioChunks = ref([])
+
+  const startRecording = () => {
+    if (isRecording.value) return
+
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((stream) => {
+        isRecording.value = true
+        audioChunks.value = []
+
+        mediaRecorder.value = new MediaRecorder(stream)
+
+        mediaRecorder.value.ondataavailable = (event) => {
+          audioChunks.value.push(event.data)
+        }
+
+        mediaRecorder.value.onstop = () => {
+          const audioBlob = new Blob(audioChunks.value, { type: "audio/wav" })
+          const audioUrl = URL.createObjectURL(audioBlob)
+
+          // 这里可以触发发送音频消息的事件
+          // 或者调用父组件的方法
+
+          // 停止所有音频轨道
+          stream.getTracks().forEach((track) => track.stop())
+        }
+
+        mediaRecorder.value.start()
+      })
+      .catch((error) => {
+        console.error("录音失败:", error)
+        message.error("无法访问麦克风，请检查权限设置")
+        isRecording.value = false
+      })
+  }
+
+  const stopRecording = () => {
+    if (!isRecording.value || !mediaRecorder.value) return
+
+    isRecording.value = false
+    mediaRecorder.value.stop()
+  }
+
+  return {
+    isRecording,
+    startRecording,
+    stopRecording,
+  }
+}