2021-08-23 小程序录音和播放功能实现

微信官方大大提供了完整的音频相关api,可以直接看看官方文档熟悉下。
录音:https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/wx.getRecorderManager.html
音频播放:https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html

录音:注意需要用户授权scope.record
先获取全局唯一的录音管理器:

const recorderManager = wx.getRecorderManager();//创建录音对象

一般我们设计录音都是长按触发录制,我这里也一样,提前给按钮绑定longpress(长按)、touchend(手指触摸动作结束)、touchcancel(手指触摸动作被打断,如来电提醒,弹窗)3个事件,详见https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html,示例如下:

<view catchlongpress="handleRecordStart" catchtouchend="handleRecordStop" catchtouchcancel="touchcancel"></view>
    // 长按开始录制
    handleRecordStart() {
        var that = this;
        // 弹窗提示
        this.setData({isRecording: true,recordTip: '正在录音'});
        // 如果当前正在播放录音那就停止播放
        myAudio.stop();
        this.setData({ isPlay:false});
        // 开始录音
        recorderManager.start({
            duration: 60000,
            format: 'mp3'
        });
        // 监听录音开始事件
        recorderManager.onStart(()=>{
            // 手动计时-暂时无法在录音播放之前获取到时长只能手动计时
            that.data.tapeTime=0;
            that.timer=setInterval(() => {
                that.data.tapeTime++;
            }, 1000);
            // 超过60秒自动停止并发送录音
            setTimeout(()=>{
                recorderManager.stop();// 结束录音        
                that.recorderManagerOnStop();// 对停止录音进行监控
            },60000);
        });
    },

注意:微信小程序目前只支持最多10分钟的录音。另外本人暂时没有想到办法直接获取录音的时长,只能手动计时,希望有办法的可以分享一下谢谢。

    // 松开停止录制
    handleRecordStop() {
        recorderManager.stop();// 结束录音        
        this.recorderManagerOnStop();// 对停止录音进行监控
    },

注意:在录音超过60秒以及松开停止录制时都对录音停止进行了监听,其实也就是每次都绑定了一次监听事件onStop,实际只需要对recorderManager录音对象在页面中只绑定一次监听事件即可(可参照下文音频监听事件的绑定),这里我的处理不够细腻。

    // 触摸动作被打断-如来电提醒,授权弹窗等
    touchcancel(){
        // 前面录的不做处理,需重新录制
        recorderManager.stop();
        this.setData({isRecording: false});  
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }    
    },

封装监听录音结束处理函数:

    // 监听录音结束
    recorderManagerOnStop(){
        var that = this;
        if (that.timer) {
            clearInterval(that.timer);
            that.timer = null;
        }     
        recorderManager.onStop((res) => {// 录音管理器自带的监控事件onStop
            // 对录音时长进行判断,少于3s的不进行发送,并做出提示
            if (res.duration <= 3000) {
                that.setData({ recordTip: '时间太短,请超过3秒' }, () => {
                    // 关闭弹窗
                    setTimeout(() => {
                        that.setData({ isRecording: false });
                    }, 1000);
                });
            } else {          
                const {tempFilePath} = res;
                // 关闭弹窗、展示录音播放按钮和时长
                that.setData({ isRecording: false ,tempFilePath,haveTape: true,tapeTime: that.data.tapeTime});
            }
        })
    },

录音录好了之后,通过音频上下文对象控制播放/停止播放。

音频播放:
先创建内部audio上下文InnerAudioContext对象:

const myAudio = wx.createInnerAudioContext();//创建音频对象
    // 点击播放/暂停音频
    handlePlay() {
        let that=this;
        that.setData({ isPlay: !that.data.isPlay },()=>{
            myAudio.src=that.data.tempFilePath;
            if(that.data.isPlay){
                myAudio.play();
            }else{
                myAudio.stop();
            }
        });
    },

一般播放停止的时候按钮样式会发生改变,我们可以在onLoad中提前绑定好相关的监听事件:

    onLoad: function () {
        // 监听播放自然结束时,修改按钮展示
        myAudio.onEnded(()=>{
            this.changeIsPlay();
        });
        // 监听被停止时,修改按钮展示(如有需要,对播放暂停也可进行监听,事件onPause)
        myAudio.onStop(()=>{
            this.changeIsPlay();
        });
        // 监听音频因为受到系统占用而被中断开始事件。以下场景会触发此事件:闹钟、电话、FaceTime 通话、微信语音聊天、微信视频聊天。此事件触发后,小程序内所有音频会暂停
        wx.onAudioInterruptionBegin(()=>{
            myAudio.stop();
        })
    },

    //播放完毕修改按钮状态
    changeIsPlay(){
        this.setData({isPlay:false,isPlay2:false});
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容