vue3은 레코더 코어를 사용하여 온라인으로 오디오를 녹음합니다.

vue3은 레코더 코어를 사용하여 온라인 오디오 녹음
URL을 구현합니다 . https://gitee.com/xiangyuecn/Recorder
gitee : https://gitee.com/xiangyuecn/Recorder.git

코드, 스타일 1:

<template>
  <div class="learnDetail">
    <!-- 音频录制 -->
    <div class="main">
      <div class="mainBox">
        <div class="btns">
          <div>
            <button @click="recOpen">打开录音,请求权限</button>
            <button @click="recClose">关闭录音,释放资源</button>
          </div>

          <button @click="recStart">录制</button>
          <button @click="recStop" style="margin-right: 80px">停止</button>

          <span style="display: inline-block">
            <button @click="recPause">暂停</button>
            <button @click="recResume">继续</button>
          </span>
          <span style="display: inline-block">
            <button @click="recPlayLast">播放</button>
            <button @click="recUploadLast">上传</button>
          </span>
        </div>
      </div>

      <div class="mainBox">
        <!-- 录音波形 -->
        <div class="ctrlProcessWave noneWrap" />
        <!-- 录音频率计时 -->
        <div class="haveWrap">
          <div
            class="ctrlProcessX"
            style="height: 40px; background: #0b1; position: absolute"
            :style="{ width: state.powerLevel + '%' }"
          ></div>
          <div class="ctrlProcessT" style="padding-left: 50px; line-height: 40px; position: relative">
            {
   
    
    {
   
    
     state.duration + '/' + state.powerLevel }}
          </div>
        </div>
      </div>

      <div class="mainBox">
        <audio ref="LogAudioPlayer" style="width: 100%"></audio>
        <!-- 日志 -->
        <div class="mainLog">
          <div v-for="obj in state.logs" :key="obj.idx">
            <div :style="{ color: obj.color == 1 ? 'red' : obj.color == 2 ? 'green' : obj.color }">
              <span v-once>[{
   
    
    {
   
    
     getTime() }}]</span><span v-html="obj.msg" />

              <template v-if="obj.res">
                {
   
    
    {
   
    
     intp(obj.res.rec.set.bitRate, 3) }}kbps {
   
    
    {
   
    
     intp(obj.res.rec.set.sampleRate, 5) }}hz 编码{
   
    
    {
   
    
    
                  intp(obj.res.blob.size, 6)
                }}b [{
   
    
    {
   
    
     obj.res.rec.set.type }}]{
   
    
    {
   
    
     intp(obj.res.duration, 6) }}ms

                <button @click="recdown(obj.idx)">下载</button>
                <button @click="recplay(obj.idx)">播放</button>

                <span v-html="obj.playMsg"></span>
                <span v-if="obj.down">
                  <span style="color: red">{
   
    
    {
   
    
     obj.down }}</span>

                  没弹下载？试一下链接或复制文本<button @click="recdown64(obj.idx)">生成Base64文本</button>

                  <textarea v-if="obj.down64Val" v-model="obj.down64Val"></textarea>
                </span>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div v-if="state.recOpenDialogShow" class="bootomWrap">
        <div style="display: flex; height: 100%; align-items: center">
          <div style="flex: 1"></div>
          <div style="width: 240px; background: #fff; padding: 15px 20px; border-radius: 10px">
            <div style="padding-bottom: 10px">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>
            <div style="text-align: center"><a @click="waitDialogClick" style="color: #0b1">忽略</a></div>
          </div>
          <div style="flex: 1"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script  setup>
import Recorder from 'recorder-core'
// 需要使用到的音频格式编码引擎的js文件统统加载进来，这些引擎文件会比较大
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
import 'recorder-core/src/extensions/waveview'
import {
   
    
     reactive, ref } from 'vue'
import {
   
    
     ElNotification, ElMessage } from 'element-plus'

const LogAudioPlayer = ref()
const state = reactive({
   
    
    
  Rec: Recorder,
  type: 'mp3',
  bitRate: 16,
  sampleRate: 16000,
  rec: