前端录入音频并上传

目录

• [纯 js 实现（有问题）](#纯 js 实现（有问题）)
• [使用插件 `recorder-core` （没问题）](#使用插件 recorder-core （没问题）)

纯 js 实现（有问题）

上传音频文件时 blob 数据中 size 一直是0，导致上传之后音频不可播放（本地录制后本地是可以播放的）

<template>
  <div>
    <button v-if="!isRecording" @click="startRecording">开始录音</button>
    <button v-else @click="stopRecording">停止录音</button>
    <audio v-show="recordedAudio" ref="audioPlayer" controls></audio>
    <!-- <audio src="./法老-百变酒精.mp3" controls></audio> -->
  </div>
</template>

<script>
import { UploadOssFiles } from '@/api/service'

export default {
  data() {
    return {
      isRecording: false,
      recordedAudio: null,
      mediaRecorder: null,
      chunks: []
    }
  },
  methods: {
    startRecording() {
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          this.isRecording = true
          this.mediaRecorder = new MediaRecorder(stream)
          this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable)
          this.mediaRecorder.start()
        })
        .catch((error) => {
          console.error('无法访问麦克风：', error)
        })
    },
    stopRecording() {
      this.isRecording = false
      this.mediaRecorder.stop()
      // this.mediaRecorder.state = 'inactive'

      const blob = new Blob(this.chunks, { type: 'audio/webm' })
      // const blob = new Blob(this.chunks, { type: 'audio/mp3' })
      console.log('blob----', blob)
      const formData = new FormData()
      // formData.append('audio', blob, 'recording.webm')
      formData.append('files', blob, 'recording.webm')
      // formData.append('files', blob, 'recording.mp3')
      // 发送音频数据到后端的API接口
      UploadOssFiles(formData)
        .then((response) => {
          // 处理后端返回的响应
        })
        .catch((error) => {
          // 处理请求错误
        })
    },
    handleDataAvailable(event) {
      this.chunks.push(event.data)
      if (this.mediaRecorder.state === 'inactive') {
        this.processRecordedAudio()
      }
    },
    processRecordedAudio() {
      const blob = new Blob(this.chunks, { type: 'audio/webm' })
      // const blob = new Blob(this.chunks, { type: 'audio/mp3' })
      this.recordedAudio = URL.createObjectURL(blob)
      console.log('this.recordedAudio----', this.recordedAudio)
      this.$refs.audioPlayer.src = this.recordedAudio
    }
  }
}
</script>

代码来源

使用插件 recorder-core （没问题）

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

<script>
import { UploadOssFiles } from '@/api/service'

// 必须引入的核心
import Recorder from 'recorder-core'

// 引入mp3格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统引入进来即可
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
// 录制wav格式的用这一句就行
// import 'recorder-core/src/engine/wav'

// 可选的插件支持项，这个是波形可视化插件
import 'recorder-core/src/extensions/waveview'

// ts import 提示：npm包内已自带了.d.ts声明文件（不过是any类型）

export default {
  name: '',
  components: {},

  data() {
    return {
      rec: null,
      recBlob: null,
      wave: null
    }
  },

  methods: {
    // 申请录音权限
    recOpen() {
      // 创建录音对象
      this.rec = Recorder({
        type: 'mp3', // 录音格式，可以换成wav等其他格式
        sampleRate: 16000, // 录音的采样率，越大细节越丰富越细腻
        bitRate: 16, // 录音的比特率，越大音质越好
        onProcess: (
          buffers,
          powerLevel,
          bufferDuration,
          bufferSampleRate,
          newBufferIdx,
          asyncEnd
        ) => {
          // 录音实时回调，大约1秒调用12次本回调
          // 可实时绘制波形，实时上传（发送）数据
          if (this.wave) this.wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate)
        }
      })

      // 打开录音，获得权限
      this.rec.open(
        () => {
          console.log('录音已打开')
          if (this.$refs.recwave) {
            // 创建音频可视化图形绘制对象
            this.wave = Recorder.WaveView({ elem: this.$refs.recwave })
          }
        },
        (msg, isUserNotAllow) => {
          // 用户拒绝了录音权限，或者浏览器不支持录音
          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg)
        }
      )
    },
    // 开始录音
    recStart() {
      if (!this.rec) {
        console.error('未打开录音')
        return
      }
      this.rec.start()
      console.log('已开始录音')
    },
    // 结束录音
    recStop() {
      if (!this.rec) {
        console.error('未打开录音')
        return
      }
      this.rec.stop(
        (blob, duration) => {
          // blob就是我们要的录音文件对象，可以上传，或者本地播放
          this.recBlob = blob
          // 简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
          var localUrl = (window.URL || webkitURL).createObjectURL(blob)
          console.log('录音成功', blob, localUrl, '时长:' + duration + 'ms')

          this.upload(blob) // 把blob文件上传到服务器

          this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
          this.rec = null
        },
        (err) => {
          console.error('结束录音出错：' + err)
          this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
          this.rec = null
        }
      )
    },
    // 上传录音
    upload(blob) {
      console.log('blob----', blob)
      // 使用FormData用multipart/form-data表单上传文件
      // 或者将blob文件用FileReader转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传
      var form = new FormData()
      form.append('files', blob, 'recorder.mp3') // 和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3

      UploadOssFiles(form)
        .then((response) => {
          // 处理后端返回的响应
        })
        .catch((error) => {
          // 处理请求错误
        })
    },
    // 本地播放录音
    recPlay() {
      // 本地播放录音试听，可以直接用URL把blob转换成本地播放地址，用audio进行播放
      var localUrl = URL.createObjectURL(this.recBlob)
      var audio = document.createElement('audio')
      audio.controls = true
      document.body.appendChild(audio)
      audio.src = localUrl
      audio.play() // 这样就能播放了

      // 注意不用了时需要revokeObjectURL，否则霸占内存
      setTimeout(function () {
        URL.revokeObjectURL(audio.src)
      }, 5000)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

代码来源