前端录入音频并上传

纯 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

代码来源

使用插件 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

代码来源

封装 mixins

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'
import 'recorder-core/src/engine/wav'
// 录制wav格式的用这一句就行
// import 'recorder-core/src/engine/wav'

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

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

export const soundRecordingMixins = {
  name: '',
  components: {},

  data() {
    return {
      rec: null,
      wave: null,
      isSoundRecording: false,
      rowData: {},
      audioDuration: ''
    }
  },

  methods: {
    // 申请录音权限
    recOpen() {
      // 创建录音对象
      this.rec = Recorder({
        // type: 'mp3',
        type: '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('rec.open------', '录音已打开')
          this.recStart()
          if (this.$refs.recwave) {
            // 创建音频可视化图形绘制对象
            this.wave = Recorder.WaveView({ elem: this.$refs.recwave })
          }
        },
        (msg, isUserNotAllow) => {
          // 用户拒绝了录音权限，或者浏览器不支持录音
          console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg)
          this.$message.error('暂无录音权限，请稍后再试！')
        }
      )
    },
    // 开始录音
    recStart() {
      if (!this.rec) {
        console.error('未打开录音')
        return
      }
      this.$message.success('开始录入声纹')
      this.rec.start()
      this.isSoundRecording = true
    },
    // 结束录音
    recStop() {
      this.isSoundRecording = false
      if (!this.rec) {
        console.error('未打开录音')
        return
      }
      this.rec.stop(
        (blob, duration) => {
          // this.audioSrc = URL.createObjectURL(blob)

          this.$message.success('声纹录入完成')
          this.audioDuration = duration / 1000

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

          this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
          this.rec = null
        },
        (err) => {
          this.$message.error('声纹录入失败，请重试！')
          console.error('结束录音出错：' + err)
          this.rec.close() // 关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
          this.rec = null
        }
      )
    },
    // 上传录音
    uploadOssHandler(blob) {
      var form = new FormData()
      form.append('relativePath', 'voiceprint/')
      // form.append('files', blob, `${this.rowData.xm + +new Date()}.mp3`)
      form.append('files', blob, `${this.rowData.xm + +new Date()}.wav`)

      UploadOssFiles(form)
        .then((response) => {
          if (response.data && !response.data.fileUploadInfoList.length) {
            this.$message.error(`声纹上传失败，请重试！`)
            this.fileList = []
          }
          // 处理后端返回的响应
          const fileList = response.data.fileUploadInfoList
            ? response.data.fileUploadInfoList.map((item) => {
                return {
                  wjmc: item.filename,
                  wjlj: item.path,
                  wjgs: item.fileType
                }
              })
            : []

          this.voiceprintImportList = []
          this.voiceprintImportList.push(...fileList)
          this.fileList = []
          this.audioSrc = this.sysConfigData.mon_sys_ossurl + this.voiceprintImportList[0].wjlj
          this.addVoiceHandler()
        })
        .catch((error) => {
          console.log('error----', error)
          this.$message.error('声纹上传失败！')
        })
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146