黑豹程序员-页面录音-在vue页面中进行录音wav/mp3

原创

于 2023-10-15 10:52:11 发布 · 806 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #录音

本文介绍了如何在Vue页面中使用Recorder.js音频组件进行录音、暂停、播放操作，以及获取和下载PCB/WAV格式的录音数据，并演示了上传WAV录音文件的过程。

功能

在vue页面中进行录音wav/mp3

效果图

在这里插入图片描述

官网展示页面

https://recorder.zhuyuntao.cn/
在这里插入图片描述

安装组件

npm i js-audio-recorder

测试页面

<template>
    <h3>录音时长：{
   
   {
   
    recorder.duration.toFixed(4) }}</h3>
    <el-row>
      <el-button type="primary" @click="startRecordAudio">开始录音</el-button>
      <el-button type="danger" @click="stopRecordAudio">停止录音</el-button>
      <el-button type="success" @click="playRecordAudio">播放录音</el-button>
    </el-row>

    <el-row>
      <el-button type="button" @click="getPCBRecordAudioData">获取PCB录音数据</el-button>
      <el-button type="button" @click="downloadPCBRecordAudioData">下载PCB录音文件</el-button>
      <el-</