更新记录

1.0.1（2022-06-11） 下载此版本

修复苹果手机在微信中无法获取音频长度问题

1.0.0（2022-06-10） 下载此版本

版本上线

平台兼容性

插件简绍

实现原理

通过 navigator.mediaDevices.getUserMedia(需要https环境) 这个api调用麦克风，获取到到音频流数据。

通过 MediaRecorder 这个构造函数对音频流进行接收，完成录制后会返回一个存储Blob内容的录制数据。

使用环境

需要https环境才能使用，本地测试可以在 manifest.json 中点击源码展示，找到h5 ，添加："devServer" : { "https" : true}

请勿使用 UC浏览器 与 夸克等阿里旗下的浏览器，发现他们使用的内核都较低，无法正常获取音频流，并且都有对接音频流截取的插件，导致无法正常获取音频流的数据。在微信中可以正常使用，推荐在微信内打开演示案例

需要https环境才能使用！！！

需要https环境才能使用！！！

需要https环境才能使用！！！

插件使用

插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用

<!-- HTML -->
    <view>
    <audio :src='recorder.localUrl' v-if='recorder' name='本地录音' controls="true"></audio>
    <view @click='handlerOnCahnger'>
            {{!status?'开始录音':'结束录音'}}
        </view>
        <mumu-recorder ref='recorder' @success='handlerSuccess' @error='handlerError'></mumu-recorder>
    </view>

// js
    import MumuRecorder from '@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue'
    export default {
        components: { MumuRecorder },
        data() {
            return {
                status: false,
                recorder: null
            }
        },
        onLoad() {

        },
        methods: {
            handlerSave() {
                let tag = document.createElement('a')
                tag.href = this.recorder.localUrl
                tag.download = '录音'
                tag.click()
            },
            handlerOnCahnger() {
                if (this.status) {
                    this.$refs.recorder.stop()
                } else {
                    this.$refs.recorder.start()
                }
                this.status = !this.status
            },
            handlerSuccess(res) {
                console.log(res)
                this.recorder = res
            },
            handlerError(code) {
                switch (code) {
                    case '101':
                        uni.showModal({
                            content: '当前浏览器版本较低，请更换浏览器使用，推荐在微信中打开。'
                        })
                        break;
                    case '201':
                        uni.showModal({
                            content: '麦克风权限被拒绝，请刷新页面后授权麦克风权限。'
                        })
                        break
                    default:
                        uni.showModal({
                            content: '未知错误，请刷新页面重试'
                        })
                        break
                }
            }
        }
    }

相关API

组件内部方法（$refs 调用）

事件（Events）

案例演示

支持作者