uniapp H5 实现录音功能(js-audio-recorder)_js-audio-recorder文档

原博客文档：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)
    }