E企盈营销工具技术服务商 热线:4006-838-530

关于小程序上传录音,播放录音功能。

E企盈直播平台营销卖货系统

前言因项目开发需求,在创建名片的时候可选择上传语音,播放语音。所以写这博客是我之前也没有写过录音的部分。记录笔记关于文档录音全局变量const recorderManager = wx.getRecorderManager()//创建录音       返回值    recorderManagerconst innerAudioContext = wx.createInnerAudioContext()//播放录音  返回值   innerAudioContext小程序创建录音那么接下来上菜index.html      <view class=’infomationdesc’>        <text>上传录音</text>        <view class=’audio-view’>          <image class=’headurl’ src='{{headurl?headurl:”https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1548148347&di=a062deda420f73c7d81e009fd4278f6d&src=http://b-ssl.duitang.com/uploads/item/201701/20/20170120012252_XtKwM.jpeg”}}’></image>          <text wx:if=”{{tempFilePath==”}}”>  暂未录音  </text>          <view wx:else bindtap=’play’ class=’audio’></view>        </view>        <button bindlongtap=”longTap”  bindtouchstart=”touchStart” bindtouchend=”touchEnd”>长按录音</button>      </view>css就省略了,不是重点重点来了wx.getRecorderManager()//创建录音   返回值recorderManager 有很多方法,详情看文档const innerAudioContext = wx.createInnerAudioContext()//播放录音  返回值   innerAudioContext**index.js//录音声明const recorderManager = wx.getRecorderManager()//创建录音const innerAudioContext = wx.createInnerAudioContext()//播放录音Page({  /**   * 页面的初始数据   */  data: {   },// 录音  //开始录音的时候  start: function() {    const options = {      duration: 10000, //指定录音的时长,单位 ms      sampleRate: 16000, //采样率      numberOfChannels: 1, //录音通道数      encodeBitRate: 96000, //编码码率      format: ‘mp3’, //音频格式,有效值 aac/mp3      frameSize: 50, //指定帧大小,单位 KB    }    //开始录音    recorderManager.start(options);    recorderManager.onStart(() => {      console.log(‘recorder start’)    });    //错误回调    recorderManager.onError((res) => {      console.log(res, “aaas”);    })  },  //停止录音  stop: function() {    recorderManager.stop();    recorderManager.onStop((res) => {       this.tempFilePath = res.tempFilePath;      // 上传 录音文件         wx.uploadFile({        header: app.globalData.header,        url: app.host + ‘/returnFileInfo’,        filePath: res.tempFilePath,        name: ‘file’,        success: (res) => {               this.setData({            tempFilePath: JSON.parse(res.data).path,//为播放提供路径            audiosrc: {//这一步是我项目后台需求组装后台需要的格式              src: JSON.parse(res.data).path,              relateType: 3,            },          })          console.log(‘停止录音’, this.data.tempFilePath)        }      })    })  },  //播放声音  play: function() {    console.log(this.data.tempFilePath,”播放录音地址”)    innerAudioContext.autoplay = true//是否自动播放    innerAudioContext.src = this.tempFilePath, //音频资源的地址,用于直接播放      innerAudioContext.onPlay(() => {        console.log(‘开始播放’)      })    innerAudioContext.onError((res) => {      console.log(res.errMsg)      console.log(res.errCode)    })  },  longTap: function() {    console.log(‘longTap….’)  },  touchStart: function() {    console.log(‘touchStart….’)    this.start();  },  touchEnd: function() {    console.log(‘touchEnd….’)    this.stop()  },

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 关于小程序上传录音,播放录音功能。
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏