vue 移动端录音功能

在Vue移动端，你可以使用HTML5的MediaRecorder API来录制音频。下面是一个示例：

1. 创建一个录音组件，例如Record.vue:

<template>
  <div>
    <button v-on:touchstart="startRecording" v-on:touchend="stopRecording">开始录音</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chunks: [],
      mediaRecorder: null,
      isRecording: false
    };
  },
  methods: {
    startRecording() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
          this.mediaRecorder = new MediaRecorder(stream);
          this.mediaRecorder.start();
          this.isRecording = true;
          this.mediaRecorder.addEventListener('dataavailable', event => {
            if (typeof event.data === 'undefined') return;
            if (event.data.size === 0) return;
            this.chunks.push(event.data);
          });
        })
        .catch(err => console.log(err));
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.addEventListener('stop', () => {
        const audioBlob = new Blob(this.chunks, { 'type': 'audio/mp3' });
        const audioURL = URL.createObjectURL(audioBlob);
        const audio = new Audio(audioURL);
        audio.play();
        this.chunks = [];
        this.isRecording = false;
      });
    }
  }
}
</script>

2. 在需要使用录音功能的页面中引入Record组件，并使用：

<template>
  <div>
    <Record></Record>
  </div>
</template>

<script>
import Record from './Record.vue';

export default {
  components: {
    Record
  }
}
</script>

在上面的示例中，我们在Record组件中请求用户许可使用麦克风。一旦用户授权，我们就创建一个MediaRecorder实例并开始录制音频。在录制期间，我们将音频数据存储在一个数组中。当停止录制时，我们使用Blob对象将音频数据转换为Blob对象，这样我们就可以将其上传到服务器或将其保存到本地文件中。最后，我们创建一个Audio实例并将其播放，以便用户可以听到自己的录音。