vue实现录音
Vue 实现录音功能
在Vue中实现录音功能通常需要借助浏览器提供的Web Audio API和MediaRecorder API。以下是实现步骤：
安装依赖
需要安装recordrtc库来处理录音：
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>
import RecordRTC from 'recordrtc'
export default {
data() {
return {
isRecording: false,
recorder: null,
audioUrl: null
}
},
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
this.recorder = new RecordRTC(stream, {
type: 'audio',
mimeType: 'audio/wav'
})
this.recorder.startRecording()
this.isRecording = true
} catch (error) {
console.error('录音权限被拒绝:', error)
}
},
stopRecording() {
this.recorder.stopRecording(() => {
const blob = this.recorder.getBlob()
this.audioUrl = URL.createObjectURL(blob)
this.isRecording = false
// 可以在这里处理blob，如上传到服务器
// this.uploadAudio(blob)
})
},
uploadAudio(blob) {
const formData = new FormData()
formData.append('audio', blob, 'recording.wav')
// 使用axios或其他HTTP库上传
}
}
}
</script>使用原生MediaRecorder API实现
如果不使用第三方库，可以使用原生API：
<script>
export default {
methods: {
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
this.mediaRecorder = new MediaRecorder(stream)
this.chunks = []
this.mediaRecorder.ondataavailable = (e) => {
this.chunks.push(e.data)
}
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.chunks, { type: 'audio/wav' })
this.audioUrl = URL.createObjectURL(blob)
}
this.mediaRecorder.start()
this.isRecording = true
} catch (error) {
console.error('录音错误:', error)
}
},
stopRecording() {
this.mediaRecorder.stop()
this.isRecording = false
}
}
}
</script>注意事项
- 需要在HTTPS环境或localhost下才能使用媒体设备API
- 不同浏览器支持的音频格式可能不同
- 移动端可能需要额外处理权限问题
- 录音质量可以通过调整采样率等参数控制
扩展功能
- 添加录音可视化
- 实现暂停/继续功能
- 添加录音时长显示
- 支持多种音频格式输出
以上代码提供了在Vue中实现录音功能的基本方法，可以根据实际需求进行调整和扩展。
