參考地址
一、下載插件
npm i js-audio-recorder
二、示例
<template>
? <div style="padding: 20px;">
? ? <h3>錄音上傳</h3>
? ? <div style="font-size:14px">
? ? ? <h3>錄音時(shí)長(zhǎng)：{{ 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">繼續(xù)錄音</el-button>
? ? ? <el-button type="warning" @click="handleStop">停止錄音</el-button>
? ? ? <br />
? ? ? <br />
? ? ? <h3>
? ? ? ? 播放時(shí)長(zhǎng)：{{
? ? ? ? ? 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">繼續(xù)播放</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()
? ? ? Recorder.getPermission().then(() => {
? ? ? ? console.log('開始錄音')
? ? ? ? this.recorder.start() // 開始錄音
? ? ? }, (error) => {
? ? ? ? this.$message({
? ? ? ? ? message: '請(qǐng)先允許該網(wǎng)頁使用麥克風(fēng)',
? ? ? ? ? type: 'info'
? ? ? ? })
? ? ? ? console.log(`${error.name} : ${error.message}`)
? ? ? })
? ? },
? ? handlePause() {
? ? ? console.log('暫停錄音')
? ? ? this.recorder.pause() // 暫停錄音
? ? },
? ? handleResume() {
? ? ? console.log('恢復(fù)錄音')
? ? ? this.recorder.resume() // 恢復(fù)錄音
? ? },
? ? handleStop() {
? ? ? console.log('停止錄音')
? ? ? this.recorder.stop() // 停止錄音
? ? },
? ? handlePlay() {
? ? ? console.log('播放錄音')
? ? ? console.log(this.recorder)
? ? ? this.recorder.play() // 播放錄音
? ? ? // 播放時(shí)長(zhǎng)
? ? ? this.timer = setInterval(() => {
? ? ? ? try {
? ? ? ? ? this.playTime = this.recorder.getPlayTime()
? ? ? ? } catch (error) {
? ? ? ? ? this.timer = null
? ? ? ? }
? ? ? }, 100)
? ? },
? ? handlePausePlay() {
? ? ? console.log('暫停播放')
? ? ? this.recorder.pausePlay() // 暫停播放
? ? ? // 播放時(shí)長(zhǎng)
? ? ? this.playTime = this.recorder.getPlayTime()
? ? ? this.time = null
? ? },
? ? handleResumePlay() {
? ? ? console.log('恢復(fù)播放')
? ? ? this.recorder.resumePlay() // 恢復(fù)播放
? ? ? // 播放時(shí)長(zhǎng)
? ? ? this.timer = setInterval(() => {
? ? ? ? try {
? ? ? ? ? this.playTime = this.recorder.getPlayTime()
? ? ? ? } catch (error) {
? ? ? ? ? this.timer = null
? ? ? ? }
? ? ? }, 100)
? ? },
? ? handleStopPlay() {
? ? ? console.log('停止播放')
? ? ? this.recorder.stopPlay() // 停止播放
? ? ? // 播放時(shí)長(zhǎng)
? ? ? this.playTime = this.recorder.getPlayTime()
? ? ? this.timer = null
? ? },
? ? handleDestroy() {
? ? ? console.log('銷毀實(shí)例')
? ? ? this.recorder.destroy() // 毀實(shí)例
? ? ? this.timer = null
? ? },
? ? uploadRecord() {
? ? ? if (this.recorder == null || this.recorder.duration === 0) {
? ? ? ? this.$message({
? ? ? ? ? message: '請(qǐng)先錄音',
? ? ? ? ? type: 'error'
? ? ? ? })
? ? ? ? return false
? ? ? }
? ? ? this.recorder.pause() // 暫停錄音
? ? ? this.timer = null
? ? ? console.log('上傳錄音')// 上傳錄音
? ? ? const formData = new FormData()
? ? ? const blob = this.recorder.getWAVBlob()// 獲取wav格式音頻數(shù)據(jù)
? ? ? // 此處獲取到blob對(duì)象后需要設(shè)置fileName滿足當(dāng)前項(xiàng)目上傳需求油宜，其它項(xiàng)目可直接傳把blob作為file塞入formData
? ? ? const 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>
