当前位置：首页 > VUE

vue中实现录音下载

2026-01-22 04:53:04VUE

Vue 中实现录音下载的方法

使用 Web Audio API 和 MediaRecorder

安装必要的依赖库（如需要）：

npm install recordrtc

在 Vue 组件中引入相关库：

vue中实现录音下载

import RecordRTC from 'recordrtc';

创建录音逻辑：

export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      audioBlob: null,
      audioUrl: ''
    };
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.mediaRecorder = new MediaRecorder(stream);

      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.audioChunks.push(event.data);
        }
      };

      this.mediaRecorder.onstop = () => {
        this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
        this.audioUrl = URL.createObjectURL(this.audioBlob);
        this.audioChunks = [];
      };

      this.mediaRecorder.start();
    },

    stopRecording() {
      this.mediaRecorder.stop();
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
    },

    downloadRecording() {
      const a = document.createElement('a');
      a.href = this.audioUrl;
      a.download = 'recording.wav';
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(this.audioUrl);
      }, 100);
    }
  }
};

使用第三方库简化实现

使用 vue-audio-recorder 插件：

vue中实现录音下载

npm install vue-audio-recorder

在组件中使用：

import VueAudioRecorder from 'vue-audio-recorder';

export default {
  components: {
    VueAudioRecorder
  },
  methods: {
    onRecordingComplete(audio) {
      const url = URL.createObjectURL(audio.blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recording.mp3';
      a.click();
    }
  }
};

注意事项

需要 HTTPS 环境或 localhost 才能使用 getUserMedia API
不同浏览器支持的音频格式可能不同
长时间录音需要考虑内存管理
移动端可能需要额外权限处理

样式和模板示例

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

兼容性处理

对于不支持 MediaRecorder 的浏览器，可以使用 RecordRTC 作为 fallback：

const recorder = new RecordRTC(stream, {
  type: 'audio',
  mimeType: 'audio/wav'
});

标签: vue

分享给朋友：

vue实现图片分析

Vue 实现图片分析的方法在 Vue 中实现图片分析通常涉及图片上传、预览、后端交互以及分析结果展示等功能。以下是几种常见的实现方式：使用 HTML5 File API 和 Canvas…

vue实现发送值接受值

Vue 实现父子组件传值父组件向子组件传值（props）父组件通过 v-bind 或简写 : 向子组件传递数据。子组件通过 props 接收数据。父组件代码： <templat…

vue实现发表

Vue 实现发表功能在 Vue 中实现发表功能通常涉及表单处理、数据绑定和网络请求。以下是实现步骤和代码示例：表单设计与数据绑定创建一个表单用于输入发表内容，使用 v-model 进行数据双向…

vue实现付款

Vue 实现付款功能在 Vue 中实现付款功能通常需要集成第三方支付网关（如支付宝、微信支付、Stripe 等）。以下是常见的实现方法：集成支付宝/微信支付安装必要的依赖（如 axios 用…

js实现vue

Vue.js 的基本实现方法在 JavaScript 中实现 Vue.js 的功能，可以通过直接引入 Vue 库或使用现代构建工具（如 Vite 或 Webpack）。以下是几种常见的实现方式：…

vue 实现toast

vue 实现 toast 的方法在 Vue 中实现 Toast 提示功能可以通过多种方式，以下是几种常见的实现方法：使用第三方库 Vue 生态中有许多成熟的 Toast 库，例如 vue-toa…

vue中实现录音下载