实现一个录音上传功能，用于考试、作业中，学生可以上传朗读课文的录音。
npm i js-audio-recorder
<template><div style="padding: 20px;"><h3>录音上传</h3><div style="font-size:14px"><h3>录音时长：{{recorder && recorder.duration.toFixed(4) }}</h3><br><el-button type="primary" @click="handleStart">开始录音</el-button><el-button type="info" @click="handlePause">暂停录音</el-button><el-button type="success" @click="handleResume">继续录音</el-button><el-button type="warning" @click="handleStop">停止录音</el-button><br><br><h3>播放时长：{{recorder &&(playTime > recorder.duration? recorder.duration.toFixed(4): playTime.toFixed(4))}}</h3><br><el-button type="primary" @click="handlePlay">播放录音</el-button><el-button type="info" @click="handlePausePlay">暂停播放</el-button><el-button type="success" @click="handleResumePlay">继续播放</el-button><el-button type="warning" @click="handleStopPlay">停止播放</el-button><el-button type="error" @click="handleDestroy">销毁录音</el-button><el-button type="primary" @click="uploadRecord">上传</el-button></div></div></template><script>import Recorder from 'js-audio-recorder'export default {data() {return {recorder: null,playTime: 0,timer: null,src: null}},created() {// this.recorder = new Recorder()},methods: {// 开始录音handleStart() {this.recorder = new Recorder()// this.recorder = new Recorder({// sampleBits: 8, // 采样位数，支持 8 或 16，默认是16// sampleRate: 11025, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000// numChannels: 1 // 声道，支持 1 或 2， 默认是1// // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false// })Recorder.getPermission().then(() => {console.log('开始录音')this.recorder.start() // 开始录音}, (error) => {this.$message({message: '请先允许该网页使用麦克风',type: 'info'})console.log(`${error.name} : ${error.message}`)})},handlePause() {console.log('暂停录音')this.recorder.pause() // 暂停录音},handleResume() {console.log('恢复录音')this.recorder.resume() // 恢复录音},handleStop() {console.log('停止录音')this.recorder.stop() // 停止录音},handlePlay() {console.log('播放录音')console.log(this.recorder)this.recorder.play() // 播放录音// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime()} catch (error) {this.timer = null}}, 100)},handlePausePlay() {console.log('暂停播放')this.recorder.pausePlay() // 暂停播放// 播放时长this.playTime = this.recorder.getPlayTime()this.time = null},handleResumePlay() {console.log('恢复播放')this.recorder.resumePlay() // 恢复播放// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime()} catch (error) {this.timer = null}}, 100)},handleStopPlay() {console.log('停止播放')this.recorder.stopPlay() // 停止播放// 播放时长this.playTime = this.recorder.getPlayTime()this.timer = null},handleDestroy() {console.log('销毁实例')this.recorder.destroy() // 毁实例this.timer = null},uploadRecord() {if (this.recorder == null || this.recorder.duration === 0) {this.$message({message: '请先录音',type: 'error'})return false}this.recorder.pause() // 暂停录音this.timer = nullconsole.log('上传录音')// 上传录音const formData = new FormData()const blob = this.recorder.getWAVBlob()// 获取wav格式音频数据// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formDataconst newbolb = new Blob([blob], {type: 'audio/wav' })const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')formData.append('file', fileOfBlob)const url = window.URL.createObjectURL(fileOfBlob)this.src = url// const axios = require('axios')// axios.post(url, formData).then(res => {// console.log(res.data.data[0].url)// })}}}</script>
from:
https://recorder-/Recorder/start.html
/qq_34241004/article/details/108347473?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%20%E9%A1%B9%E7%9B%AE%E5%AE%9E%E7%8E%B0%E5%BD%95%E9%9F%B3%E6%92%AD%E6%94%BE&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-6-108347473.nonecase&spm=1018.2226.3001.4187
/article/541986.html
