devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序调用讯飞接口实现录音和获取录音音译的文本 前端部分 包含图片、视频的上传功能_微信小程序获取录音文件

作者：IT小白 | 2024-02-12 11:45:20

赞

踩

微信小程序获取录音文件

时间的3是三秒还没修改格式 问题不大 凑合着看一眼弄了个啥 单纯为了记录 需要的同学得自己找需用用到的地方 我多少写了点注释

wxml部分：

  1. <view class="wrap">
  2.   <el-form :inline="true" :model="form">
  3.     <view class="white-box" wx:for="{{activityMaterials}}" wx:key="index">
  4.       <view class="title-box">
  5.         <view class="yellow-fence"></view>
  6.         <view class="title-txt-part" wx:if="{{!item.isEdit}}">
  7.           <view class="v1">{{item.title}}</view>
  8.           <image src="/image/icon_edit.png" class="icon-edit" data-idx="{{index}}" bindtap="titleHandle" />
  9.         </view>
  10.         <input wx:if="{{item.isEdit}}" type="text" value="" data-idx="{{index}}" class="title-input" placeholder="请输入标题" bindblur="inputBlurHandle" />   
  11.         <image src="/image/icon_close_black.png" data-idx="{{index}}" class="icon-close-black" bindtap="deleteHandle"></image>     
  12.       </view>
  13.  
  14.       <view class="textarea-box-wrap">
  15.  
  16.         <view class="voice-box" wx:if="{{item.recordArr.length > 0}}">
  17.           <!--这里是录音的显示区域-->
  18.           <view class="record-item" wx:for="{{item.recordArr}}" wx:key="txt" wx:for-item="oItem" wx:for-index="oIndex">
  19.             <view class="record-list" data-pidx="{{index}}" data-idx="{{oIndex}}" bindtap="playHandle">            
  20.               <image src="{{oItem.played == true ? '/image/icon_pause.png' : '/image/icon_video.png'}}" class="icon-video" />
  21.               <text class="t1">语音</text>
  22.               <text class="t2">00:{{oItem.time}}</text>
  23.             </view>
  24.             <view class="record-txt" wx:if="{{oItem.showTxt}}">{{oItem.txt}}</view>
  25.           </view>
  26.  
  27.           <!-- <view class="record-item">
  28.             <view class="record-list">            
  29.               <image src="/image/icon_video.png" class="icon-video" />
  30.               <text class="t1">语音</text>
  31.               <text class="t2">00:23</text>
  32.             </view>
  33.             <view class="record-txt">该生聪明伶俐，乐于助人，和同学们相处融洽，尊师重道，就是不学习，感觉没别的啥缺点</view>
  34.           </view> -->
  35.  
  36.         </view>
  37.  
  38.         <textarea class="textarea-box" value="{{item.content}}" data-idx="{{index}}" bindblur="textareaBlurHandle" placeholder="请输入内容"></textarea>
  39.         <!--这里是中间那个录音按钮-->
  40.         <button class="record-btn" data-idx="{{index}}" bindtap="recordHandle">
  41.           <image src="/image/icon_record_gray.png" wx:if="{{!item.recordState}}" class="icon-record" />
  42.           <image src="/image/icon_record_red.png" wx:else="{{item.recordState}}" class="icon-record" />
  43.         </button>
  44.       </view>
  45.                   
  46.       <view class="material-box">
  47.         <button class="upload-box" data-idx="{{index}}" bindtap="uploadFile">
  48.           <image src="/image/icon_photo.png" class="icon-photo" />
  49.           上传图片、视频
  50.         </button>
  51.         
  52.         <block wx:for="{{activityMaterials[index].material}}" wx:for-item="mItem" wx:for-index="mIndex" wx:key="url">
  53.           <view class="material-list" wx:if="{{mItem.type == 'img'}}">
  54.             <image src="/image/icon_close.png" class="icon-close" data-pidx="{{index}}" data-idx="{{mIndex}}" bindtap="closeHadle" />
  55.             <image src="{{mItem.url}}" data-src="{{mItem.url}}" data-pidx="{{index}}" data-idx="{{mIndex}}" bindtap="preview" class="material-list-m2" mode="aspectFill"></image>
  56.           </view>
  57.           <view class="material-list" wx:if="{{mItem.type == 'mp4'}}">
  58.             <image src="/image/icon_close.png" class="icon-close" data-pidx="{{index}}" data-idx="{{mIndex}}" bindtap="closeHadle" />
  59.             <video src="{{mItem.url}}" data-src="{{mItem.url}}" class="material-list-m2" mode="aspectFill"></video>
  60.           </view>
  61.         </block>
  62.       </view>
  63.  
  64.     </view>
  65.  
  66.     <view class="add-box" bindtap="addListHandle">
  67.       +添加
  68.     </view>
  69.  
  70.     <view class="save-btn" bindtap="save">提交</view>
  71.   </el-form>
  72. </view>

 js部分
 

  1. const app = getApp()
  2. const util = require('../../utils/util.js');
  3. const api = require('../../config/api.js');
  4. const BASE_URL = app.globalData.BASE_URL
  5. let lock = false
  6.  
  7. //**************重点 该录音功能亲测如果超过三秒不继续录音会自动结束录音 还得手动关闭录音状态**************
  8. //录音部分-start
  9. const innerAudioContext = wx.createInnerAudioContext({
  10.   useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
  11. })
  12. const recorderManager = wx.getRecorderManager();
  13. var wxst; //语音websocket
  14. var status = 0; // 音频的状态
  15. var iatResult = [] // 识别结果
  16. const searchoptions = {
  17.   duration: 1000 * 60,
  18.   sampleRate: 16000,
  19.   numberOfChannels: 1,
  20.   encodeBitRate: 48000,
  21.   format: 'mp3',
  22.   frameSize: 6
  23. }
  24. //录音部分-end
  25.  
  26. Page({
  27.   data: {
  28.     coursewareId: '',
  29.     form: {},
  30.     activityMaterials: [],
  31.     isFromReport: false,
  32.     info: {},    
  33.     //recordArr: [], recordArr率属于activityMaterials的子集 //音频数组 包含三个字段 url->mp3格式文件 txt:MP3的文字版的文本 time: 录音的时间 played:是否正在播放
  34.     parentIndex: null,
  35.  
  36.     //录音部分-start
  37.     srcMic: '',
  38.     edit_text_max: 200,
  39.     remain_length: 200,
  40.     edit_text: "",
  41.     is_focus: false,
  42.     tips: "",
  43.     index: -1,
  44.     voicePath: "",
  45.     //语音
  46.     //recordState: false, //录音状态 该字段纳入作为activityMaterials的子级 由activityMaterials统一调配
  47.     contentTxt: '', //内容
  48.     firstSend: true,
  49.     //录音部分-end
  50.   },
  51.  
  52.   onLoad(options) {
  53.     //console.log(options)
  54.     if (options.title) { //自定义顶部导航title
  55.       wx.setNavigationBarTitle({
  56.         title: options.title
  57.       })
  58.     }
  59.     const userInfo = wx.getStorageSync('userInfo');
  60.     this.setData({
  61.       userInfo,
  62.       coursewareId: options.coursewareId,
  63.       isFromReport: options.isFromReport ? true : false,
  64.       title: options.title,
  65.       info: {
  66.         thumb: options.thumb,
  67.         title: options.title,
  68.         updateTime: options.updateTime
  69.       },
  70.       activityMaterials: []
  71.     })
  72.     lock = false
  73.     //先调用接口 如果length为零 那么新增一个对象    
  74.     this.loadData()
  75.     this.initRecord()//这个是录音的内容要调用    
  76.   },
  77.  
  78.   onShow: function () { //这是录音的马蜂窝
  79.     var that = this;
  80.     recorderManager.onStart(() => {//开始录音时触发
  81.       status = 0;
  82.       iatResult = []
  83.       //console.log('recorder start');
  84.       that.data.firstSend = false;
  85.     });
  86.     recorderManager.onError((res) => {//错误回调
  87.       //console.log(res);
  88.     });
  89.     recorderManager.onStop((res) => {//结束录音时触发
  90.       //console.log('recorder stop')
  91.       //console.log(res)
  92.       let otime = (res.duration/1000).toFixed(0)
  93.       status = 2;
  94.       var sendsty = '{"data":{"status":2,"audio":"","format":"audio/L16;rate=8000","encoding":"raw"}}'
  95.       wxst.send({
  96.         data: sendsty
  97.       })
  98.       wx.uploadFile({
  99.         // 模拟https
  100.         url: BASE_URL + 'common/uploadMediaToTencent', //需要用HTTPS，同时在微信公众平台后台添加服务器地址
  101.         filePath: res.tempFilePath, //上传的文件本地地址
  102.         name: 'file',
  103.         //附近数据，这里为路径
  104.         success: function(result) {          
  105.           // console.log("--结束录音--")
  106.           // console.log(that.data.contentTxt)
  107.           // console.log(JSON.parse(result.data).url)
  108.           // console.log(otime)
  109.           if(that.data.contentTxt){            
  110.             //recordArr: []//音频数组 包含三个字段 url->mp3格式文件 txt:MP3的文字版的文本 time: 录音的时间 played:是否正在播放
  111.             let ourl = JSON.parse(result.data).url
  112.             let pidx = that.data.parentIndex
  113.             let params = {
  114.               url: ourl,
  115.               txt: that.data.contentTxt,
  116.               time: that.timeHandle(otime),//这个时间是用来显示的
  117.               played: false,
  118.               showTxt: false,
  119.             }
  120.             let oarr = that.data.activityMaterials 
  121.             
  122.             oarr.forEach((item) => {
  123.               item.recordArr = item.recordArr && item.recordArr.length > 0 ? item.recordArr : []
  124.             })
  125.               
  126.             oarr[pidx].recordArr.push(params)
  127.             that.setData({
  128.               activityMaterials: oarr
  129.             })         
  130.             //console.log(that.data.activityMaterials)
  131.           }else{
  132.             //console.log("木有内容啊")
  133.           }
  134.         },
  135.         fail: function(err) {
  136.           //console.log(err)
  137.         }
  138.       })
  139.     });
  140.     recorderManager.onFrameRecorded((res) => {//每帧触发
  141.       const that = this
  142.       const { frameBuffer, isLastFrame } = res
  143.       let params = {
  144.         'common': {
  145.           'app_id': '57198f05'
  146.         },
  147.         'business': {
  148.           'language': 'zh_cn', //⼩语种可在控制台--语⾳听写（流式）--⽅⾔/语种处添加试⽤
  149.           'domain': 'iat',
  150.           'accent': 'mandarin', //中⽂⽅⾔可在控制台--语⾳听写（流式）--⽅⾔/语种处添加试⽤
  151.           'vad_eos': 1000,
  152.           'dwa': 'wpgs' //为使该功能⽣效，需到控制台开通动态修正功能（该功能免费）
  153.         },
  154.         'data': {
  155.           'status': 0,
  156.           'format': 'audio/L16;rate=16000',
  157.           'encoding': 'lame',
  158.           'audio': wx.arrayBufferToBase64(frameBuffer)
  159.         }
  160.       }
  161.       // 拼接数据
  162.       let status = 0
  163.       if (this.data.firstSend) {
  164.         this.data.firstSend = false
  165.       } else {
  166.         if (isLastFrame) {
  167.           status = 2
  168.         } else {
  169.           status = 1
  170.         }
  171.       }
  172.       params.data.status = status
  173.       wx.sendSocketMessage({
  174.         data: JSON.stringify(params),
  175.         success: (data) => {
  176.           console.log('send success:' + JSON.stringify(data))
  177.           //that.resetRecordState()
  178.         },
  179.         fail: (err) => {
  180.           console.log('send error:' + JSON.stringify(err))
  181.           //中断录音的时候
  182.           //that.resetRecordState()
  183.         },
  184.         completed: () => {
  185.           if (isLastFrame) {
  186.             // wx closeSocket
  187.           }
  188.         }
  189.       })
  190.     })
  191.   },
  192.  
  193.   timeHandle(time){
  194.     if(time < 9){
  195.       return '0' + time
  196.     }else{
  197.       return time
  198.     }
  199.   },
  200.  
  201.   //重置录音按钮状态
  202.   resetRecordState(){
  203.     let activityMaterials = this.data.activityMaterials
  204.     activityMaterials[this.data.parentIndex].recordState = false
  205.     this.setData({
  206.       activityMaterials: activityMaterials
  207.     })
  208.   },
  209.  
  210.   save() {//这里还没改 不重要的文件
  211.     if (lock) return
  212.     lock = true
  213.     //处理过滤activityMaterials数据
  214.     let actArr = this.data.activityMaterials.map(function (item) {
  215.       let oarr = []
  216.       //转换数据格式
  217.       oarr[0] = {
  218.         content: item.content
  219.       }
  220.       for (let i in item.material) {
  221.         oarr.push({
  222.           content: item.material[i].url
  223.         })
  224.       }
  225.       return {
  226.         title: item.title,
  227.         paragraphs: oarr
  228.       }
  229.     })
  230.     for (let i in actArr) {
  231.       //title等于编辑标题就代表没编辑过 paragraphs[0].content的值为空就代表textare没编辑过 paragraphs[1]不存在或者content为空就代表没编辑过
  232.       if (actArr[i].title == '编辑标题' && !actArr[i].paragraphs[0].content && (!actArr[i].paragraphs[1] || !actArr[i].paragraphs[1].content)) {
  233.         actArr.splice(i, 1)
  234.       }
  235.     }
  236.     if (actArr.length == 0) {
  237.       wx.showToast({
  238.         title: '请先编辑材料！',
  239.         icon: 'none',
  240.         duration: 2000
  241.       })
  242.       lock = false
  243.       return
  244.     }
  245.     util.request(api.activityPreparationSave, {
  246.       teacherId: this.data.userInfo.userId,
  247.       classId: this.data.userInfo.deptId,
  248.       coursewareId: this.data.coursewareId,
  249.       activityMaterials: actArr
  250.     }, 'POST', 'application/json').then(res => {
  251.       if (res.code = 200) {
  252.         wx.showToast({
  253.           title: '提交成功！',
  254.           icon: 'error',
  255.           duration: 2000
  256.         })
  257.         //判断是不是报告那边跳转过来的
  258.         if (this.data.isFromReport) {
  259.           let oinfo = this.data.info
  260.           wx.redirectTo({
  261.             url: '../reportdetail/reportdetail?coursewareId=' + this.data.coursewareId + '&title=' + oinfo.title + '&thumb=' + oinfo.thumb + '&updateTime=' + oinfo.updateTime
  262.           })
  263.         } else {
  264.           wx.navigateBack({
  265.             delta: 1
  266.           });
  267.         }
  268.         lock = false
  269.       } else {
  270.         wx.showToast({
  271.           title: res.msg,
  272.           icon: 'error',
  273.           duration: 2000
  274.         })
  275.         lock = false
  276.       }
  277.     });
  278.   },
  279.  
  280.   loadData() {
  281.     util.request(api.activityPreparationList + this.data.userInfo.userId + '&coursewareId=' + this.data.coursewareId + '&classId=' + this.data.userInfo.deptId, '', 'get').then(res => {
  282.       if (res.code = 200) {
  283.         let odata = res.data
  284.         if (odata && odata.length == 0) {
  285.           let obj = this.data.activityMaterials
  286.           obj.push({
  287.             title: '编辑标题',
  288.             isEdit: false,
  289.             content: '',
  290.             material: []
  291.           })
  292.           this.setData({
  293.             activityMaterials: obj
  294.           })
  295.         } else {
  296.           //重组数据
  297.           //type 1图片 3视频 
  298.           let oarr = odata.map(function (item) {
  299.             let paragraphs = []
  300.             for (let i in item.paragraphs) {
  301.               paragraphs.push({
  302.                 url: item.paragraphs[i].content,
  303.                 type: item.paragraphs[i].type == '3' ? 'mp4' : item.paragraphs[i].type == '1' ? 'img' : ''
  304.               })
  305.             }
  306.             return {
  307.               title: item.title ? item.title : '编辑标题',
  308.               isEdit: false,
  309.               content: item.content,
  310.               material: paragraphs
  311.             }
  312.           })
  313.           //console.log(oarr)
  314.           this.setData({
  315.             activityMaterials: oarr
  316.           })
  317.         }
  318.       } else {
  319.         wx.showToast({
  320.           title: res.msg,
  321.           icon: 'error',
  322.           duration: 2000
  323.         })
  324.       }
  325.     });
  326.   },
  327.  
  328.   addListHandle() {
  329.     let obj = this.data.activityMaterials
  330.     obj.push({
  331.       title: '编辑标题',
  332.       isEdit: false,
  333.       content: '',
  334.       material: []
  335.     })
  336.     this.setData({
  337.       activityMaterials: obj
  338.     })
  339.   },
  340.  
  341.   titleHandle(e) {
  342.     let obj = this.data.activityMaterials
  343.     let idx = e.currentTarget.dataset.idx
  344.     obj[idx].isEdit = true
  345.     this.setData({
  346.       activityMaterials: obj
  347.     })
  348.   },
  349.   inputBlurHandle(e) {
  350.     let oval = e.detail.value
  351.     let obj = this.data.activityMaterials
  352.     let idx = e.currentTarget.dataset.idx
  353.     if (oval) {
  354.       obj[idx].title = oval
  355.     }
  356.     obj[idx].isEdit = false
  357.     this.setData({
  358.       activityMaterials: obj
  359.     })
  360.   },
  361.   textareaBlurHandle(e) {
  362.     let oval = e.detail.value
  363.     let obj = this.data.activityMaterials
  364.     let idx = e.currentTarget.dataset.idx
  365.     if (oval) {
  366.       obj[idx].content = oval
  367.     }
  368.     this.setData({
  369.       activityMaterials: obj
  370.     })
  371.   },
  372.  
  373.   preview(e) {
  374.     let currentUrl = e.currentTarget.dataset.src
  375.     let pidx = e.currentTarget.dataset.pidx //父级循环的index
  376.     const oarr = []
  377.     for (let i in this.data.activityMaterials[pidx].material) {
  378.       oarr.push(this.data.activityMaterials[pidx].material[i].url)
  379.     }
  380.     wx.previewImage({
  381.       current: currentUrl, // 当前显示图片的http链接
  382.       urls: oarr // 需要预览的图片http链接列表
  383.     })
  384.   },
  385.  
  386.   closeHadle(e) {
  387.     //console.log(e)
  388.     const that = this
  389.     wx.showModal({
  390.       title: '',
  391.       content: '是否删除素材',
  392.       success(res) {
  393.         if (res.confirm) {
  394.           let obj = that.data.activityMaterials
  395.           let pidx = e.currentTarget.dataset.pidx //父级循环的index
  396.           let idx = e.currentTarget.dataset.idx //子级循环的index
  397.           obj[pidx].material.splice(idx, 1)
  398.           that.setData({
  399.             activityMaterials: obj
  400.           })
  401.         } else if (res.cancel) {
  402.           //console.log('用户点击取消')
  403.         }
  404.       }
  405.     })
  406.   },
  407.  
  408.   //上传图片、视频
  409.   uploadFile: function (e) {
  410.     const that = this
  411.     let obj = this.data.activityMaterials
  412.     let pidx = e.currentTarget.dataset.idx
  413.     wx.chooseMedia({
  414.       count: 9, // 设置为需要上传的文件数量
  415.       mediaType: ['image', 'video'],
  416.       success: function (res) {
  417.         const files = res.tempFiles;
  418.         // 遍历选择的文件数组，依次上传每个文件
  419.         files.forEach(function (file) {
  420.           const tempFilePath = file.tempFilePath;
  421.           wx.uploadFile({
  422.             url: BASE_URL + 'common/uploadMediaToTencent',
  423.             filePath: tempFilePath,
  424.             name: 'file',
  425.             success: function (res) {
  426.               //console.log(res)
  427.               let ores = JSON.parse(res.data)
  428.               //每个数组里添加一个type值是mp4或者img，在for循环里通过type赋值到mp4或者img里面
  429.               let otype = that.getFileExtension(ores.url)
  430.               if (otype) {
  431.                 let params = {
  432.                   url: ores.url,
  433.                   type: otype
  434.                 }
  435.                 obj[pidx].material.push(params)
  436.               }
  437.               that.setData({
  438.                 activityMaterials: obj
  439.               })
  440.             },
  441.             fail: function (res) {
  442.               //console.log(res.errMsg);
  443.               // 处理上传失败后的逻辑
  444.             }
  445.           })
  446.         });
  447.       }
  448.     })
  449.   },
  450.   //用一个方法来判断 返回的文件是mp4 还是图片
  451.   getFileExtension(url) {
  452.     const dotIndex = url.lastIndexOf('.');
  453.     const extension = url.substring(dotIndex + 1);
  454.     if (/(jpg|jpeg|png)$/.test(extension.toLowerCase())) {
  455.       return 'img'
  456.     } else if (/(mp4|avi|mov)$/.test(extension.toLowerCase())) {
  457.       return 'mp4'
  458.     }
  459.     return false
  460.   },
  461.  
  462.   deleteHandle(e) {
  463.     const that = this
  464.     wx.showModal({
  465.       title: '',
  466.       content: '是否删除',
  467.       success(res) {
  468.         if (res.confirm) {
  469.           let obj = that.data.activityMaterials
  470.           let idx = e.currentTarget.dataset.idx //子级循环的index
  471.           obj.splice(idx, 1)
  472.           that.setData({
  473.             activityMaterials: obj
  474.           })
  475.         } else if (res.cancel) {
  476.           //console.log('用户点击取消')
  477.         }
  478.       }
  479.     })
  480.   },
  481.  
  482.   //识别语音 -- 初始化 从这里开始是录音的内容 一直到结束
  483.   initRecord: function () {
  484.     var that = this;
  485.     wx.onSocketOpen((res) => {// websocket打开
  486.       //console.log('监听到 WebSocket 连接已打开' + res);
  487.     })
  488.     wx.onSocketError((err) => {//连接失败
  489.       //console.log('websocket连接失败', err);
  490.       wx.showToast({
  491.         title: 'websocket连接失败',
  492.         icon: 'none',
  493.         duration: 2000,
  494.         mask: false
  495.       })
  496.     })
  497.     wx.onSocketMessage((res) => {//接收返回值
  498.       var data = JSON.parse(res.data)
  499.       //console.log('----------------')
  500.       //console.log(data)
  501.       if (data.code != 0) {
  502.         //console.log("error code " + data.code + ", reason " + data.message)
  503.         return
  504.       }
  505.       let str = ""
  506.       if (data.data.status == 2) {//最终识别结果
  507.         // data.data.status ==2 说明数据全部返回完毕，可以关闭连接，释放资源
  508.         wxst.close();
  509.       } else {//中间识别结果
  510.       }
  511.       iatResult[data.data.result.sn] = data.data.result
  512.       if (data.data.result.pgs == 'rpl') {
  513.         data.data.result.rg.forEach(i => {
  514.           iatResult[i] = null
  515.         })
  516.       }
  517.       iatResult.forEach(i => {
  518.         if (i != null) {
  519.           i.ws.forEach(j => {
  520.             j.cw.forEach(k => {
  521.               str += k.w
  522.             })
  523.           })
  524.         }
  525.       });
  526.       // console.log('这个是中间的语音识别结果')
  527.       // console.log(str)
  528.       that.setData({
  529.         contentTxt: str //这个是中间的语音识别结果
  530.       })
  531.       if(!this.data.contentTxt){
  532.         wx.showToast({
  533.           title: '识别失败，请重新录入',
  534.           icon: 'none',
  535.           duration: 2000,
  536.           mask: false
  537.         })        
  538.         return
  539.       }
  540.     })
  541.     wx.onSocketClose((res) => {//WebSocket连接已关闭！
  542.       //var that = this;
  543.       recorderManager.stop();
  544.       // var str = that.data.contentTxt;
  545.       // console.log(str);
  546.       // str = str.replace(/\s*/g, "");//去除空格
  547.       // if (str.substr(str.length - 1, 1) == "。") {//去除句号
  548.       //   str = str.substr(0, str.length - 1);
  549.       // }
  550.       // console.log('这个是最后确定的语音识别结果', str)
  551.       // that.setData({
  552.       //   contentTxt: str//这个是最后确定的语音识别结果
  553.       // })
  554.       //console.log('WebSocket连接已关闭！')
  555.     })
  556.   },
  557.  
  558.   //录音和停止录音操作
  559.   recordHandle(e){
  560.     let oactivityMaterials = this.data.activityMaterials
  561.     let parentIndex = e.currentTarget.dataset.idx
  562.     
  563.     this.setData({//获取父级的下标 后面录音结束后给对应的模块赋值
  564.       parentIndex: parentIndex
  565.     })    
  566.     //改成点击事件
  567.     if(!oactivityMaterials[parentIndex].recordState){
  568.       wx.showToast({
  569.         title: '开始录音',
  570.         icon: 'none',
  571.         duration: 1000
  572.       })
  573.       //兄弟节点的录音按钮改成灰色
  574.       if(oactivityMaterials.length > 1){
  575.         for(let i in oactivityMaterials){
  576.           oactivityMaterials[i].recordState = false
  577.         }
  578.         this.setData({
  579.           activityMaterials: oactivityMaterials
  580.         })
  581.       }
  582.       oactivityMaterials[parentIndex].recordState = true
  583.       this.setData({
  584.         activityMaterials: oactivityMaterials  //录音状态
  585.       })
  586.       wx.getSetting({//查看用户有没有开启语音权限
  587.         success(res) {
  588.           if (res.authSetting['scope.record']) {
  589.             wx.authorize({
  590.               scope: 'scope.record',
  591.               success() {
  592.                 var xfurl = "";
  593.                 wx.request({//请求接口 获取讯飞语音鉴权
  594.                   url: BASE_URL + 'assistant/url',
  595.                   method: "get",
  596.                   header: {
  597.                     'content-type': 'application/json' // 默认值
  598.                   },
  599.                   success: function (res) {
  600.                     //console.log('鉴权结果start:');
  601.                     //console.log(res);
  602.                     if (res.statusCode == "200" && res.data) {
  603.                       xfurl = res.data;
  604.                       wxst = wx.connectSocket({ // 开启websocket连接
  605.                         url: xfurl,
  606.                         method: 'GET',
  607.                         success: function (res) {
  608.                           recorderManager.start(searchoptions);//开始录音
  609.                         }
  610.                       });
  611.                     } else {
  612.                       wx.showToast({
  613.                         title: '获取语音鉴权失败',
  614.                         icon: 'none',
  615.                         mask: true,
  616.                         duration: 3000
  617.                       })
  618.                     }
  619.                   },
  620.                   fail: function () {
  621.                     wx.showToast({
  622.                       title: '获取语音鉴权失败',
  623.                       icon: 'none',
  624.                       mask: true,
  625.                       duration: 3000
  626.                     })
  627.                   }
  628.                 })
  629.               },
  630.               fail() {
  631.                 wx.showModal({
  632.                   title: '微信授权',
  633.                   content: '您当前未开启语音权限，请在右上角设置(···)中开启“录音功能”',
  634.                   showCancel: false,
  635.                   success(res) {
  636.                     if (res.confirm) {
  637.                       //console.log('用户点击确定')
  638.                     }
  639.                   }
  640.                 })
  641.               }
  642.             })
  643.           } else {
  644.             wx.showModal({
  645.               title: '微信授权',
  646.               content: '您当前未开启语音权限，请在右上角设置(···)中开启“录音功能”',
  647.               showCancel: false,
  648.               success(res) {
  649.                 if (res.confirm) {
  650.                   //console.log('用户点击确定')
  651.                 }
  652.               }
  653.             })
  654.           }
  655.         }
  656.       })
  657.     }else{
  658.       oactivityMaterials[parentIndex].recordState = false
  659.       this.setData({
  660.         activityMaterials: oactivityMaterials
  661.       })
  662.       recorderManager.stop();
  663.     }    
  664.   },
  665.  
  666.   //播放操作
  667.   playHandle(e){
  668.     const that = this
  669.     let idx = e.currentTarget.dataset.idx
  670.     let pidx = e.currentTarget.dataset.pidx
  671.     //recordArr的字段有url/txt/time/played/showTxt    
  672.     let activityMaterials = this.data.activityMaterials
  673.     let orecordArr = activityMaterials[pidx].recordArr[idx]
  674.     
  675.     innerAudioContext.src = orecordArr.url    
  676.     if(!orecordArr.played){
  677.       //查找兄弟节点 把所有的played状态改成false
  678.       for(let i in activityMaterials){
  679.         for(let j in activityMaterials[i].recordArr){
  680.           activityMaterials[i].recordArr[j].played = false
  681.         }
  682.       }
  683.       // if(activityMaterials && activityMaterials.length > 1){
  684.       //   that.setData({
  685.       //     activityMaterials: activityMaterials
  686.       //   })
  687.       // }
  688.       //播放
  689.       orecordArr.played = true
  690.       innerAudioContext.play() // 播放      
  691.       innerAudioContext.onEnded(() => {
  692.         //console.log('语音播放结束');     
  693.         orecordArr.played = false
  694.         that.setData({
  695.           activityMaterials: activityMaterials
  696.         })
  697.       });
  698.     }else{
  699.       //关闭
  700.       orecordArr.played = false
  701.       innerAudioContext.stop() // 停止
  702.     }       
  703.     this.setData({
  704.       activityMaterials: activityMaterials
  705.     })    
  706.       
  707.   }
  708.  
  709. })

wxss部分

  1. .wrap{ padding: 22rpx 10rpx 100rpx 10rpx;}
  2. .white-box{ margin-bottom: 22rpx; padding: 22rpx; width: 730rpx; box-sizing: border-box; background: #fff; border-radius: 25rpx;}
  3. .title-box,.title-txt-part{ display: flex; align-items: center;}
  4. .title-box{ position: relative;}
  5. .icon-close-black{ position: absolute; right: 0; display: block; width: 20rpx; height: 21rpx;}
  6. .icon-edit{ margin-left: 10rpx; width: 31rpx; height: 30rpx;}
  7. .yellow-fence{ margin-right: 10rpx; width: 6rpx; height: 30rpx; background: #ffb81c; border-radius: 3rpx;}
  8. .title-txt-part{ font-size: 28rpx; font-weight: bold;}
  9. .title-input{ padding-left: 16rpx; width: 360rpx; height: 60rpx; border:1rpx solid #ddd; border-radius: 10rpx; font-size: 26rpx;}
  10.  
  11. .material-box{ margin-top: 22rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  12. .upload-box{ margin: 0 25rpx 25rpx 0; padding: 0; display: flex; justify-content: center; align-items: center; width: 310rpx; height: 186rpx; background: #f0f0f0; font-size: 25rpx; color: #111; border: 0; border-radius: 22rpx;}
  13. button::after {border: none;}
  14. .icon-photo{ margin-right: 10rpx; display: block; width: 93rpx; height: 85rpx;}
  15. .material-list{ position: relative; margin: 0 25rpx 25rpx 0; width: 310rpx; height: 186rpx;}
  16. .material-list-m2{ width: 100%; height: 100%; border-radius: 22rpx;}
  17. .icon-close{ position: absolute; top: 10rpx; right: 10rpx; z-index: 999; display: block; width: 50rpx; height: 50rpx;}
  18. .add-box{ margin: 22rpx auto 0 auto; width: 270rpx; text-align: center; line-height: 60rpx; font-size: 35rpx; color: #ffb81c; font-weight: bold; border-bottom: 3rpx solid #ffb81c;}
  19. .save-btn{ margin: 100rpx auto 0 auto; width: 330rpx; height: 84rpx; text-align: center; line-height: 84rpx; background: #ffb81c; font-size: 30rpx; color: #111; font-weight: bold; border-radius: 42rpx;}
  20.  
  21.  
  22. .textarea-box-wrap{ margin-top: 22rpx; padding: 22rpx; display: flex; flex-direction: column; justify-content: center; height: 580rpx; background: #f0f0f0; border-radius: 25rpx;}
  23. .textarea-box{ flex:1; height: 100%; box-sizing: border-box; font-size: 25rpx; color: #111;}
  24. .voice-box{ margin-bottom: 20rpx; max-height: 200rpx; overflow-y: scroll; box-sizing: border-box; font-size: 25rpx; color: #111;}
  25. .videoBtn {width: 50%;}
  26. .videoBtn text{color:#fff;}
  27. .videoBtnBg {background: #bdb4b4;}
  28. .startYuyinImage {  
  29.   position: fixed;
  30.   top: 200rpx;
  31.   left: 50%;
  32.   z-index: 99;
  33.   transform: translateX(-50%);
  34.   display:flex;justify-content:center;flex-flow: column;
  35.   width: 220rpx;
  36.   height: 220rpx;
  37.   text-align: center;
  38.   background: rgba(0, 0, 0, 0.1);  
  39.   color: #fff;
  40.   font-size: 24rpx;
  41.   border-radius: 50%;  
  42. }
  43. .startYuyinImage cover-image { margin:0 auto; width:80rpx;height: 80rpx;}
  44. .startYuyinImage cover-view { margin-top: 22rpx;}
  45. .musicd {
  46.   position: fixed;
  47.   z-index: 9999;
  48.   top: 10%;
  49.   left: 4%;
  50. }
  51. .musicd image {
  52.   width: 100rpx;
  53.   height: 100rpx;
  54.   z-index: 999;
  55. }
  56.  
  57. .icon-record{ display: block; width: 70rpx; height: 70rpx;}
  58. .record-btn{ margin: 0 auto; padding: 0; width: 70rpx; height: 70rpx; background: transparent; border-radius: 50%;}
  59. button::after{border: none;}
  60. .record-list{ padding-left: 18rpx; display: flex; align-items: center; box-sizing: border-box; width: 640rpx; height: 74rpx; background: #fff; color: #19b2ff; border-radius: 18rpx;}
  61. .icon-video{ display: block; width: 56rpx; height: 55rpx;}
  62. .record-list .t1{ margin: 0 22rpx;}
  63. .record-txt{ padding:10rpx 10rpx 0 10rpx; font-size: 24rpx; color: #19b2ff;}
  64. .record-item{ margin-bottom: 22rpx;}
  65. .record-item:last-child{ margin-bottom: 0;}

json不用调用什么

页面我也还没写完 单纯的记录一下这个功能

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/77592
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号