使用vue3简单实现录音时间显示

在Vue3中，为了实现简单录音时间显示，你可以结合HTML5的`MediaRecorder` API来获取录音数据，然后监听`dataavailable`事件获取录音长度。以下是一个基础的示例：

首先，你需要安装`vue-file-api`库以便于处理音频文件：

npm install vue-file-api

然后，在组件内部，创建一个`MediaRecorder`实例并监听事件：

<!-- components/RecordAudio.vue -->
<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
    <p>录音时长: {{ recordingDuration }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { createRecording } from 'vue-file-api';

export default {
  setup() {
    const recording = ref(null);

    const startRecording = async () => {
      const options = {
        mimeType: 'audio/wav', // 设置录音格式，例如audio/wav、audio/mp4等
      };

      recording.value = createRecording(options);
      recording.value.start();
    };

    const stopRecording = async () => {
      recording.value.stop();
      const blob = await new Promise((resolve) => {
        recording.value.ondataavailable = (event) => resolve(event.data);
      });
      const audioData = URL.createObjectURL(blob);
      this.recordingDuration = Math.ceil(blob.size / 1024); // 计算录音大小，单位kb
    };

    onMounted(() => {
      recording.value.addEventListener('dataavailable', () => {
        // 这里可以更新录音长度或其他进度信息
      });
    });

    return {
      startRecording,
      stopRecording,
      recordingDuration: ref(0),
    };
  },
};
</script>

在这个例子中，当你点击“开始录音”按钮，会启动录音。当你点击“停止录音”按钮，会停止录音并计算录音时长（假设blob.size是以字节为单位）。录音时长会被存储在`recordingDuration`响应式属性中。