vue实现录音播放
使用Web Audio API和MediaRecorder实现录音
在Vue中实现录音功能需要结合浏览器提供的Web Audio API和MediaRecorder接口。以下是一个基本实现方案：
安装必要的依赖（如需要）：
npm install recordrtc创建录音组件：
<template>
<div>
<button @click="startRecording">开始录音</button>
<button @click="stopRecording" :disabled="!isRecording">停止录音</button>
<audio v-if="audioURL" :src="audioURL" controls></audio>
</div>
</template>
<script>
export default {
data() {
return {
isRecording: false,
mediaRecorder: null,
audioChunks: [],
audioURL: ''
}
},
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
this.mediaRecorder = new MediaRecorder(stream)
this.mediaRecorder.ondataavailable = event => {
this.audioChunks.push(event.data)
}
this.mediaRecorder.onstop = () => {
const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' })
this.audioURL = URL.createObjectURL(audioBlob)
this.audioChunks = []
}
this.mediaRecorder.start()
this.isRecording = true
} catch (error) {
console.error('录音权限被拒绝或出错:', error)
}
},
stopRecording() {
this.mediaRecorder.stop()
this.isRecording = false
this.mediaRecorder.stream.getTracks().forEach(track => track.stop())
}
}
}
</script>使用第三方库简化实现
对于更复杂的录音需求，可以使用第三方库如RecordRTC：
<script>
import RecordRTC from 'recordrtc'
export default {
data() {
return {
recorder: null,
audioURL: null
}
},
methods: {
async startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
this.recorder = new RecordRTC(stream, {
type: 'audio',
mimeType: 'audio/wav'
})
this.recorder.startRecording()
},
stopRecording() {
this.recorder.stopRecording(() => {
this.audioURL = this.recorder.toURL()
})
}
}
}
</script>音频可视化处理
如果需要显示音频波形，可以使用Web Audio API的AnalyserNode：
setupVisualizer(audioElement) {
const audioContext = new AudioContext()
const analyser = audioContext.createAnalyser()
const source = audioContext.createMediaElementSource(audioElement)
source.connect(analyser)
analyser.connect(audioContext.destination)
const bufferLength = analyser.frequencyBinCount
const dataArray = new Uint8Array(bufferLength)
function draw() {
requestAnimationFrame(draw)
analyser.getByteTimeDomainData(dataArray)
// 使用canvas绘制波形
}
draw()
}注意事项
- 现代浏览器要求录音功能必须在HTTPS环境下或localhost才能工作
- 需要处理用户拒绝麦克风权限的情况
- 录音前应检查浏览器兼容性
- 移动设备上可能有额外的限制
- 长时间录音需要注意内存管理
以上实现提供了基本的录音和播放功能，可以根据具体需求扩展更多特性如音频编辑、格式转换等。
