在钉钉小程序中实现录音和播放功能实例

我不是女神ヾ 2023-02-20 13:31 36阅读 0赞

###### *最新更新时间：2020年06月27日11:35:07* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：钉钉小程序开发，录音，播放单段录音，连续播放多段录音

#### 项目背景 ####

> 入职公司以来用了一年的时间从0-1完成了一个微信小程序项目的开发，取得了巨大的成功，对自己的技术沉淀有着非常重大的意义，同时也开启了自己的管理道路的职业生涯。近期为了提升公司内部的管理水平，已经启动开发一款钉钉小程序产品，面向于内部全体员工使用，包括培训、考核、学习等功能。

#### DOM ####

<view>
      <view class="play-record" onTap="playAllAudio">播放全部录音</view>
      <view a:for="{ {recordAudioArr}}" a:for-index="idx" a:for-item="item">
        <view class="play-record-single" onTap="playSingleAudio" data-idx="{ {idx}}">播放第{
       {idx+1}}个录音</view>
      </view>
      <view class="record-btn { {hasStart ? 'record-btn-active' : '' }}" onTouchStart="recordStart" onTouchEnd="recordEnd" onTouchCancel="recordCancel">录音</view>
    </view>

#### CSS ####

.play-record{ 
      width: 200px;
      line-height: 30px;
      margin: 0 auto;
      background: #DDA0DD;
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
    }
    .play-record-single{ 
      width: 100px;
      line-height: 30px;
      margin: 20px auto 0;
      background: #F5DEB3;
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
    }
    .record-btn{ 
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      line-height: 60px;
      border-radius: 50%;
      background: #6495ED;
      text-align: center;
      color: #FFFFFF;
    }
    .record-btn-active{ 
      background: #4169E1;
    }

#### JS ####

let rm = null;//录音管理器
    
    Page({ 
    
      data: { 
        hasStart: false,
        recordAudioArr: []
      },
    
      canUseRecord: true,//是否可以使用录音功能
    
      onLoad() { 
        
        if (dd.canIUse('getRecorderManager')) { 
          rm = dd.getRecorderManager();//录音管理器
          rm.onstart = () => { 
            console.log('开始录音');
          }
          rm.onstop = (res) => { 
            console.log('结束录音');//res.tempFilePath
            this.data.recordAudioArr.push(res.tempFilePath);
            this.setData({ 
              recordAudioArr: this.data.recordAudioArr
            });
            console.log(this.data.recordAudioArr);
          }
          rm.onerror = (err) => { 
            dd.showToast({ content: JSON.stringify(err)});
          }
        } else { 
          this.canUseRecord = false;
          dd.showToast({ content: '请升级钉钉版本至4.5.18以支持录音功能'});
        }
      },
    
      /** * 触摸动作开始 */
      recordStart(){ 
        if(!this.canUseRecord)
          return
        this.setData({ 
          hasStart: true
        });
        rm.start({  duration: 60 });//不写duration，在Android上会报错，errorCode-2-参数错误；暂未发现录音时长上线
      },
    
      /** * 触摸动作结束 */
      recordEnd(){ 
        if(!this.canUseRecord)
          return
        this.setData({ 
          hasStart: false
        });
        rm.stop();
      },
    
      /** * 触摸动作被打断，如来电提醒，弹窗 */
      recordCancel(){ 
        if(!this.canUseRecord)
          return
        console.log('recordCancel')
        this.setData({ 
          hasStart: false
        });
      },
    
      /** * 播放全部录音 */
      playAllAudio(){ 
        let length = this.data.recordAudioArr.length;//录音的总数
        let index = 0;//录音的索引
        let bam = dd.getBackgroundAudioManager();
        //监听背景音频结束事件
        bam.onEnded = (e) => { 
          index++;
          if(index >= length)
            return
          bam.src = this.data.recordAudioArr[index];
          bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
          bam.play();
        }
        //监听背景音频错误事件, 错误类型（10001-系统错误 10002-网络错误 10003-文件错误 10004-格式错误）
        bam.onError = (err) => { 
          dd.showToast({ content: JSON.stringify(err)});
        }
        bam.src = this.data.recordAudioArr[index];
        bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
        bam.play();
      },
    
      /** * 播放单段录音 */
      playSingleAudio(e){ 
        let bam = dd.getBackgroundAudioManager();//背景音频管理器
        //监听背景音频错误事件, 错误类型（10001-系统错误 10002-网络错误 10003-文件错误 10004-格式错误）
        bam.onError = (err) => { 
          dd.showToast({ content: JSON.stringify(err)});
        }
        let idx = e.currentTarget.dataset.idx;//录音的索引
        bam.src = this.data.recordAudioArr[idx];
        bam.title = '';//不实例化此属性，ios调用多次play()，playbackRate会累加
        bam.play();
      }
    
    });

#### 参考资料 ####

*  [钉钉开发文档-getBackgroundAudioManager][-getBackgroundAudioManager]

> 感谢阅读，欢迎评论^-^

#### [`打赏我吧^-^`][-] ####

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-getBackgroundAudioManager]: https://ding-doc.dingtalk.com/doc#/dev/ag4x5f
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 Springboot钉钉免密登录集成(钉钉小程序和H5微应用)

欢迎访问我的个人博客:www.ifueen.com > RT，因为业务需要把我们系统集成到钉钉里面一个小程序和一个H5应用，并且在钉钉平台上面实现无感登录，用户打开我们系统后

灰太狼/ 2023年10月13日 06:26/ 0 赞/ 86 阅读

相关钉钉开发（前端：钉钉企业内部小程序，后端：java）

这里前端只按照模板写了大概，样式什么的都极简了一、登录[钉钉开放平台][Link 1]，点击应用开发，先创建一个小程序 ![watermark_type_ZmFuZ3po

た入场券/ 2023年07月25日 14:12/ 0 赞/ 85 阅读

相关微信小程序录音与播放录音功能实现

微信小程序录音与播放录音功能实现，话不多说直接上代码实例： test.wxml <button bindtap='start'>开始录音</button>

灰太狼/ 2023年02月21日 06:06/ 0 赞/ 37 阅读

相关在钉钉小程序中实现录音和播放功能实例

最新更新时间：2020年06月27日11:35:07 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：钉钉小程序开发，录音，播放单

我不是女神ヾ/ 2023年02月20日 13:31/ 0 赞/ 37 阅读

相关钉钉小程序

最近开发了钉钉小程序，小总结如下：一、开发准备工作开发应用类型目前只深入了解了下第三方企业应用小程序开发开发准备下载

喜欢ヅ旅行/ 2022年12月11日 05:26/ 0 赞/ 358 阅读

相关微信小程序vs钉钉小程序笔记

封装API返回值微信小程序 onLoad: function (options) { console.log(this.getPhoneT

淡淡的烟草味﹌/ 2022年12月11日 05:23/ 0 赞/ 326 阅读

相关钉钉小程序父组件调用子组件方法（钉钉小程序踩坑实录）

钉钉小程序父组件调用子组件方法页面到底部，父组件触发，调用子组件的方法，加载子组件的数据解决方法子组件里： didMo

客官°小女子只卖身不卖艺/ 2022年10月04日 13:57/ 0 赞/ 509 阅读

相关钉钉小程序版本更新问题

钉钉小程序版本更新问题因为小程序并非发布后用户立即更新，而是要等待用户冷启动或者等待48小时后更新，于是在开发中使用了`UpdateManager`方法来引导用户

Bertha 。/ 2022年09月03日 00:13/ 0 赞/ 1026 阅读

相关怎么实现钉钉告警的功能?

怎么实现钉钉告警的功能? 一,【前言】作为架构组成员之一,为了更好

古城微笑少年丶/ 2022年06月01日 03:57/ 0 赞/ 288 阅读

相关钉钉小程序基础入门

一个小程序页面由js、json、acss文件组成。js用来存放小程序的逻辑代码，json用来存放小程序的公共设置，acss用来存放页面的样式。在页面中可以放置page、c

本是古典何须时尚/ 2021年09月21日 06:14/ 0 赞/ 847 阅读