Realize recording function in H5 vue project

When you need to implement the recording function in the Vue project, you can use MediaRecorderthe interface in the Web API to perform the recording operation. The following is the implementation process of a Vue-based recording function:

Step 1: Install dependencies

First, install the library in your Vue project vue-recorder. Open a terminal and change to your project directory, execute the following command:

npm install vue-recorder

Step 2: Create the recording component

Next, create a Vue component to handle the recording functionality. In your Vue project's component directory, create a Recorder.vuefile called , and add the following code:

vue

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
  </div>
</template>

<script>
import { Recorder } from 'vue-recorder';

export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      chunks: [],
    };
  },
  methods: {
    startRecording() {
      this.chunks = [];
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream) => {
          this.mediaRecorder = new Recorder(stream);
          this.mediaRecorder.start();
          this.isRecording = true;
          this.mediaRecorder.ondataavailable = (event) => {
            this.chunks.push(event.data);
          };
        })
        .catch((error) => {
          console.error('Error accessing microphone:', error);
        });
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.isRecording = false;
      const blob = new Blob(this.chunks, { type: 'audio/webm' });
      // 处理录音完成后的逻辑，比如上传录音文件等
      // 在这里你可以将blob对象发送到服务器，保存录音文件等操作
    },
  },
};
</script>

In the above code, we import vue-recorderthe library and use MediaRecorderthe interface to perform recording operations. startRecordingmethod is used to start recording, it requests the user to access the microphone and start the recording. stopRecordingThe method is used to stop the recording and save the recording data as an Blobobject. You can handle the logic after the recording is completed in this method, such as uploading the recording file to the server.

Step 3: Use the recording component

Now, you can use the recording component you just created in your Vue project. In the component where you want to add recording functionality, import Recorder.vuethe component and use it in the template. Here is an example:

vue

<template>
  <div>
    <h1>录音功能示例</h1>
    <Recorder />
  </div>
</template>

<script>
import Recorder from './path/to/Recorder.vue';

export default {
  components: {
    Recorder,
  },
};
</script>

Through the above steps, you have successfully implemented the recording function in the Vue project. When you run the project and open the page containing the recording component, you should be able to click the "Start Recording" button to start recording, and the "Stop Recording" button to stop recording. In stopRecordingthe method, you can further process the recording data, such as uploading it to the server or performing other operations.

Make sure your project is running in a secure context (HTTPS or local development environment) so that the browser allows access to the microphone.