原博客文档:vue使用js-audio-recorder实现录音功能_qsya的博客-CSDN博客
改为uniapp里实现 > > >
1.添加实现的按钮
<view>
<button @tap="start">开始录音</button>
<button @tap="stop">停止录音</button>
<button @tap="play">播放录音</button>
</view>
2.下载 js-audio-recorder 组件
npm i js-audio-recorder
3.引入 js-audio-recorder 插件
import Recorder from 'js-audio-recorder';
4.实例化 js-audio-recorder
created() {
this.recorder = new Recorder()
},
5.实现代码
// 开始录音
start() {
this. Recorder = new Recorder()
Recorder.getPermission().then(() => {
console.log('开始录音')
this.recorder.start() // 开始录音
}, (error) => {
this.$message({
message: '请先允许该网页使用麦克风',
type: 'info'
})
console.log(`${error.name} : ${error.message}`)
})
},
stop() {
console.log('停止录音')
this.recorder.stop() // 停止录音
},
play() {
console.log('播放录音')
console.log(this.recorder)
this.recorder.play() // 播放录音
// 播放时长
this.timer = setInterval(() => {
try {
this.playTime = this.recorder.getPlayTime()
} catch (error) {
this.timer = null
}
}, 100)
}