VUE pc端+移动端上传录音并上传(recorder-core)

唐屁屁儿

已于 2024-03-22 11:26:50 修改

阅读量1.9k

点赞数 9

文章标签： vue.js 前端 javascript

于 2024-03-22 11:24:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44169843/article/details/136933751

版权

本文介绍了如何在Vue应用中使用npminstallrecorder-core库实现音频录制功能，包括开始、暂停、停止录音以及本地试听和上传录音至服务器的过程。开发者需处理录音权限和录制时间限制等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装 npm install recorder-core

以下录音组件完整代码可复用

<template>
  <div>
    <div>
      <img
        v-if="!isSound"
        src="@/assets/images/mobile/mobileDoWork/answer_question_voice_icon.png"
        alt=""
        @click="recStart"
      />
      <div
        v-else
        class="flexCenter"
        style="padding-top: 1px;color:#707070;cursor: pointer;"
        @click="recStop"
      >
        <img
          style="width:24px;height:24px;margin:0 5px 0 0;"
          src="@/assets/images/mobile/mobileDoWork/answer_question_voice_pause_icon.png"
          alt=""
        />
        暂停录音
      </div>
      <span v-if="!isSound">语音</span>
      <!--<button @click="recPlay">本地试听</button> -->
    </div>
    <div>
      <div
        v-show="isSound"
        style="padding-top: 6px"
      >
        <!-- 波形绘制区域 -->
        <div style="
            border: 1px solid #ccc;
            display: inline-block;
            vertical-align: bottom;
            border-radius: 80px;
            padding: 0 10px;
          ">
          <div
            ref="recwave"
            style="height: 40px; width: 248px"
          />
        </div>
      </div>
      <!-- <audio v-if="localUrl && !isSound" :src="localUrl"

最低0.47元/天解锁文章