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});
    },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容