微信小程序> 小程序实现录音播放及录音计时功能-微信小程序秒应如何下载-如何下载微信小程序

小程序实现录音播放及录音计时功能-微信小程序秒应如何下载-如何下载微信小程序

浏览量:3642 时间: 来源:ObjectMonkey

1.需要做一个录音程序上传音频文件,限制做大录音时长为10分钟.

2.wxml文件:

3.//pages/readindex/readindex.js

4.varapp=getApp();

5.vartimer;

6.constrecorderManager=wx.getRecorderManager();

7.constinnerAudioContext=wx.createInnerAudioContext();

8.Page({

9./**

10.*页面的初始数据

11.*/

12.data:{

13.times:'00:00',

14.winHeight:0,

15.},

16./**

17.*生命周期函数--监听页面加载

18.*/

19.onLoad:function(options){

20.console.log('readindex监听页面加载')

21.//获取系统信息

22.varthat=this;

23.wx.getSystemInfo({

24.success:function(res){

25.that.setData({

26.winHeight:res.windowHeight,

27.})

28.},

29.})

30.},

31./**

32.*生命周期函数--监听页面初次渲染完成

33.*/

34.onReady:function(){

35.wx.showModal({

36.title:'温馨提示',

37.content:'录音时,请取下耳机,在安静的公放环境下对准手机大声朗读!',

38.success:function(res){

39.if(res.confirm){

40.console.log('用户点击确定')

41.}

42.}

43.})

44.},

45./**

46.*生命周期函数--监听页面显示

47.*/

48.onShow:function(){

49.},

50./**

51.*生命周期函数--监听页面隐藏

52.*/

53.onHide:function(){

54.},

55./**

56.*生命周期函数--监听页面卸载

57.*/

58.onUnload:function(){

59.},

60./**

61.*页面相关事件处理函数--监听用户下拉动作

62.*/

63.onPullDownRefresh:function(){

64.},

65./**

66.*页面上拉触底事件的处理函数

67.*/

68.onReachBottom:function(){

69.},

70./**

71.*用户点击右上角分享

72.*/

73.onShareAppMessage:function(){

74.},

75.//开始录音的时候

76.start:function(){

77.constoptions={

78.duration:10000*6*10,//指定录音的时长,单位ms

79.sampleRate:16000,//采样率

80.numberOfChannels:1,//录音通道数

81.encodeBitRate:96000,//编码码率

82.format:'mp3',//音频格式,有效值aac/mp3

83.frameSize:50,//指定帧大小,单位KB

84.}

85.//开始录音

86.recorderManager.start(options);

87.recorderManager.onStart(()={

88.console.log('recorderstart');

89.varthat=this;

90.Countdown(that);//开始计时

91.});

92.//错误回调

93.recorderManager.onError((res)={

94.console.log('recorder出错:'+res);

95.clearTimeout(timer);//出错时停止计时

96.})

97.},

98.//停止录音

99.stop:function(){

100.recorderManager.stop();

101.recorderManager.onStop((res)={

102.this.tempFilePath=res.tempFilePath;

103.console.log('停止录音',res.tempFilePath)

104.clearTimeout(timer);

105.const{

106.tempFilePath

107.}=res

108.})

109.},

110.//播放声音

111.play:function(){

112.innerAudioContext.autoplay=true

113.innerAudioContext.src=this.tempFilePath,

114.innerAudioContext.onPlay(()={

115.console.log('开始播放')

116.})

117.innerAudioContext.onError((res)={

118.console.log(res.errMsg)

119.console.log(res.errCode)

120.})

121.}

122.})

123.//倒计时

124.varsecondes=0;

125.functionCountdown(that){

126.timer=setTimeout(function(){

127.console.log("----secondes----"+formatSeconds(secondes));

128.secondes++;

129.if(secondes=600){

130.recorderManager.stop();

131.clearTimeout(timer);

132.}

133.that.setData({

134.times:formatSeconds(secondes)

135.});

136.Countdown(that);

137.},1000);

138.};

139.functionformatSeconds(value){

140.varsecondTime=parseInt(value);//秒

141.varminuteTime=0;//分

142.varhourTime=0;//小时

143.if(secondTime60){//如果秒数大于60,将秒数转换成整数

144.//获取分钟,除以60取整数,得到整数分钟

145.minuteTime=parseInt(secondTime/60);

146.//获取秒数,秒数取佘,得到整数秒数

147.secondTime=parseInt(secondTime%60);

148.//如果分钟大于60,将分钟转换成小时

149.if(minuteTime60){

150.//获取小时,获取分钟除以60,得到整数小时

151.hourTime=parseInt(minuteTime/60);

152.//获取小时后取佘的分,获取分钟除以60取佘的分

153.minuteTime=parseInt(minuteTime%60);

154.}

155.}

156.varresult;

157.//时间的展示方式为00:00

158.if(secondTime10){

159.result="0"+parseInt(secondTime);

160.}else{

161.result=""+parseInt(secondTime);

162.}

163.if(minuteTime0){

164.if(minuteTime10){

165.result="0"+parseInt(minuteTime)+":"+result;

166.}else{

167.result=""+parseInt(minuteTime)+":"+result;

168.}

169.}else{

170.result="00:"+result;

171.}

172.//由于限制时长最多为三分钟,小时用不到

173.if(hourTime0){

174.result=""+parseInt(hourTime)+":"+result;

175.}

176.returnresult;

177.}

178.以上的代码能够实现所要的功能,还需要做优化.没有上传css文件,很简单,可以自己写.

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎