【Recorder】在 vue3 中使用 Recorder 实现录音并上传（mp3、wav）兼容 PC 和移动端

原创

已于 2024-04-25 14:49:13 修改 · 1.3w 阅读

标签

#vue.js #录音

收录于

于 2023-11-25 10:57:45 首次发布

本文介绍了如何在网页上使用Recorder插件进行音频录制，包括安装步骤、基本使用示例（如按钮控制录音/停止、波形显示）以及兼容性说明。还提及了注意事项，如浏览器安全限制和本地开发解决方案。

一、Recorder 介绍

使用 Recorder插件可以在网页中进行录音。生成 blob 文件并可以自定义上传，同时，录音过程中会显示可视化波形，同时能够做到兼容PC端、Android、和iOS，十分好用！

Recorder github 首页
在这里插入图片描述
插件效果展示：

二、安装

npm install recorder-core

三、使用

1、demo 界面

    <div>
      <div>
        <!-- 按钮 -->
        <button @click="recOpen">打开录音,请求权限</button>
        | <button @click="recStart">开始录音</button>
        <button @click="recStop">结束录音</button>
        | <button @click="recPlay">本地试听</button>
      </div>
      <div style="padding-top: 5px">
        <!-- 波形绘制区域 -->
        <div style="border: 1px solid #ccc; display: inline-block; vertical-align: bottom">
          <div style="height: 100px; width: 300px" ref="recwave">