小程序钉钉语音录入组件

前言

本文章的代码，主要针对于钉钉上小程序的开发，实现语音录入转化为文本的功能。如有什么问题欢迎留言交流。

注意：
本功能只有钉钉Version4.6.5以后的版本才支持，目前钉钉的小程序开发工具v0.26.0-beta.3版本上暂时不支持此功能，会导致报错。需要将本代码有关语音的部分注释掉，当在真机上预览或发布的时候放开注释掉的代码即可。我相信后续钉钉应该会完善对应的支持，如果你的版本已经支持，无需看本条提示。

代码效果

引入组件的页面

//.axml页面
//使用组件
<speech label="备注(可选)" keyName="remarks"  placeholder="请按住语音图片录入语音..." maxlength="100" onChange="onChange"/>

//.json页面
{
  "usingComponents": {//引用speech组件
    "speech": "/component/speech/speech",
  }
}

speech组件代码

//speech .axml文件
<view class="speechInputBox">
  <view class="labelBox">
    <view class="{{required?'labelSpeech dingding-required':'labelSpeech'}}">{{label}}</view>
  </view>
  <textarea value="{{value}}" onBlur="onBlur" placeholderClass="placeholder" onInput="onItemInput" maxlength="{{maxlength}}" placeholder="{{placeholder}}"  auto-height placeholder="自动变高" />
<view class="speech" data-index="{{currentIndex}}">
 <image onTouchStart="startRecord" onTouchEnd="stopRecord" src="{{isHold?'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545977468089&di=e84e59b12acbaef93c912c282b2f43c7&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F06%2F32%2F58PIC1B58PICEQa.jpg':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545977468000&di=eb455dbd345f76f6ca613bce1ad29020&imgtype=0&src=http%3A%2F%2Fimg.zjbiz.net%2Fupload%2Fproduct%2F2016p1%2F2016062312%2F22916.png'}}"/>
</view>
  <view class="errorMessageSpeech" hidden="{{errorMessage===''?true:false}}">{{errorMessage}}</view>
</view>


//speech .js文件
let rm = dd.getRecorderManager();
Component({
  mixins: [{
    didMount() {
      this.handleValidated(this.data.value)
      this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })
    },
  }],
  data: {
    value: "",
    errorMessage: "",
    validated: true,//验证是否通过，通过为true，否则为false  
    isHold: false,//是否在录音
  },
  props: {
    label: "",
    keyName: "",
    currentIndex: "",
    maxlength: "100",
    placeholder: "",
    required: false,
    isSubmit: false,
    onChange: (data) => {
    }
  },
  didUpdate(prevProps, prevData) {
    if (this.props.required) {//点击确定
      if (this.props.isSubmit) {
        if (this.data.value === "") {
          this.setData({
            errorMessage: "必填项，请输入",
          })
        } else {
          this.setData({
            errorMessage: "",
          })
        }
      }
    }
  },
  didUnmount() { },
  methods: {
    handleValidated(value) {
      if (this.props.required == "true") {
        if (this.data.value && this.data.value != "") {
          this.setData({ validated: true })
        } else {
          this.setData({ validated: false })
        }
      }
    },
    onBlur(e) {
      this.setData({ value: e.detail.value })
      this.handleValidated(this.data.value)
      this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })
    },
    onItemInput(e) {
      this.setData({
        value: e.detail.value,
      })
      this.handleValidated(this.data.value)
      this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })
    },
    startRecord(event) {//开始录音
      rm.start({ duration: 30 }); //最长录音时间为30s
      this.setData({ isHold: true })
    },
    stopRecord(event) {//停止录音
      this.setData({ isHold: false })
      let self =this;
      rm.stop();
      rm.onstop = (res) => {
        console.log("res.tempFilePath  in  on  stop:", res.tempFilePath);
        dd.uploadFile({
          url: '上传到远程的路径',
          fileType: 'audio',
          fileName: 'file',
          filePath: res.tempFilePath,
          formData: { info: res.tempFilePath },//上传到远程的参数
          success: res => {//上传后后台解析后的语音文本
            let data= JSON.parse(res.data);
            if (data.code ==200) {
              self.setData({ value: recordInfo.data });
              this.props.onChange({ "keyName": this.props.keyName, "value": recordInfo.data, "validated": this.data.validated, "currentIndex": this.props.currentIndex })
            }
          },
          fail: function(res) {
            console.log('fail  in  onstop  :  ', JSON.stringify(res))
          },
        });
      }
    },
  },
})


//speech .acss
.speechInputBox{
  padding: 32rpx;
  background: white;
}
.labelBox{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.speech{
  text-align: center;
}
.speech image{
  width: 104rpx;
  height: 104rpx;

}
.labelSpeech{
  width: 40%;
  font-size:30rpx;
  font-weight:500;
  color:rgba(25,31,37,1);
  margin-bottom: 24rpx;
}
textarea{
  font-size: 30rpx;
  margin-left: -12rpx;
}

.errorMessageSpeech{
  display: block;
  color: red;
  margin-left:26%;
  font-size: 25rpx;
  padding-bottom: 20rpx;
  background: white;
}
.placeholder{ 
  color:#B3B3B3; 
  font-size:28rpx; 
}


//speech .json
{
  "component": true
}