1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.
2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.
其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.
3.我在录音完成后才加载列表.
下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小.
这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_...
我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了.
时间是格式化之后的.文件大小是B,转成KB如下.
手机目录如下.但是打开之后播放不了.目前原因不明.
1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了.
2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧.
4.播放录音音频.
点击item就能听到你的声音了.别被自己吓住.哈哈.
上代码:
1.index.wxml
<!--index.wxml--> <scroll-view> <view wx:if={{voices}} class=common-list style=margin-bottom:120rpx;> <block wx:for={{voices}}> <view class=board> <view class=cell > <view class=cell-bd data-key={{item.filePath}} bindtap=gotoPlay > <view class=date>存储路径:{{item.filePath}}</view> <view class=date >存储时间:{{item.createTime}}</view> <view class=date>音频大小:{{item.size}}KB</view> </view> </view> </view> </block> </view> </scroll-view> <view wx:if={{isspeaking}} class=speak-style> <image class=sound-style src=../../images/voice_icon_speech_sound_1.png ></image> <image wx:if={{j==2}} class=sound-style src=../images/voice_icon_speech_sound_2.png ></image> <image wx:if={{j==3}} class=sound-style src=../images/voice_icon_speech_sound_3.png ></image> <image wx:if={{j==4}} class=sound-style src=../images/voice_icon_speech_sound_4.png ></image> <image wx:if={{j==5}}class=sound-style src=../images/voice_icon_speech_sound_5.png ></image> </view> <view class=record-style> <button class=btn-style bindtouchstart=touchdown bindtouchend=touchup>按住 录音</button> </view>
2.index.wxss
/**index.wxss**/ .speak-style{ position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: #26A5FF; } .item-style{ margin-top: 30rpx; margin-bottom: 30rpx; } .text-style{ text-align: center; } .record-style{ position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100%; } .btn-style{ margin-left: 30rpx; margin-right: 30rpx; } .sound-style{ position: absolute; width: 74rpx; height:150rpx; margin-top: 45rpx; margin-left: 83rpx; } .board { overflow: hidden; border-bottom: 2rpx solid #26A5FF; } /*列布局*/ .cell{ display: flex; margin: 20rpx; } .cell-hd{ margin-left: 10rpx; color: #885A38; } .cell .cell-bd{ flex:1; position: relative; } /**只显示一行*/ .date{ font-size: 30rpx; text-overflow: ellipsis; white-space:Nowrap; overflow:hidden; }
3.index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { j: 1,//帧动画初始图片 isspeaking: false,//是否正在说话 voices: [],//音频数组 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log(手指按下了...) console.log(new date : + new Date) var _this = this; speaking.call(this); this.setData({ isspeaking: true }) //开始录音 wx.startRecord({ success: function (res) { //临时路径,下次进入小程序时无法正常使用 var tempFilePath = res.tempFilePath console.log(tempFilePath: + tempFilePath) //持久保存 wx.saveFile({ tempFilePath: tempFilePath, success: function (res) { //持久路径 //本地文件存储的大小限制为 100M var savedFilePath = res.savedFilePath console.log(savedFilePath: + savedFilePath) } }) wx.showToast({ title: '恭喜!录音成功', icon: 'success', duration: 1000 }) //获取录音音频列表 wx.getSavedFileList({ success: function (res) { var voices = []; for (var i = 0; i < res.fileList.length; i++) { //格式化时间 var createTime = new Date(res.fileList[i].createTime) //将音频大小B转为KB var size = (res.fileList[i].size / 1024).toFixed(2); var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; console.log(文件路径: + res.fileList[i].filePath) console.log(文件时间: + createTime) console.log(文件大小: + size) voices = voices.concat(voice); } _this.setData({ voices: voices }) } }) }, fail: function (res) { //录音失败 wx.showModal({ title: '提示', content: '录音的姿势不对!', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') return } } }) } }) }, //手指抬起 touchup: function () { console.log(手指抬起了...) this.setData({ isspeaking: false, }) clearInterval(this.timer) wx.stopRecord() }, //点击播放录音 gotoPlay: function (e) { var filePath = e.currentTarget.dataset.key; //点击开始播放 wx.showToast({ title: '开始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放结束', icon: 'success', duration: 1000 }) } }) } }) //麦克风帧动画 function speaking() { var _this = this; //话筒帧动画 var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
注意:
1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.
2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.
3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档
1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.
2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.
其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.
3.我在录音完成后才加载列表.
下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小.
这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_...
我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了.
时间是格式化之后的.文件大小是B,转成KB如下.
手机目录如下.但是打开之后播放不了.目前原因不明.
1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了.
2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧.
4.播放录音音频.
点击item就能听到你的声音了.别被自己吓住.哈哈.
上代码:
1.index.wxml
<!--index.wxml--> <scroll-view> <view wx:if={{voices}} class=common-list style=margin-bottom:120rpx;> <block wx:for={{voices}}> <view class=board> <view class=cell > <view class=cell-bd data-key={{item.filePath}} bindtap=gotoPlay > <view class=date>存储路径:{{item.filePath}}</view> <view class=date >存储时间:{{item.createTime}}</view> <view class=date>音频大小:{{item.size}}KB</view> </view> </view> </view> </block> </view> </scroll-view> <view wx:if={{isspeaking}} class=speak-style> <image class=sound-style src=../../images/voice_icon_speech_sound_1.png ></image> <image wx:if={{j==2}} class=sound-style src=../images/voice_icon_speech_sound_2.png ></image> <image wx:if={{j==3}} class=sound-style src=../images/voice_icon_speech_sound_3.png ></image> <image wx:if={{j==4}} class=sound-style src=../images/voice_icon_speech_sound_4.png ></image> <image wx:if={{j==5}}class=sound-style src=../images/voice_icon_speech_sound_5.png ></image> </view> <view class=record-style> <button class=btn-style bindtouchstart=touchdown bindtouchend=touchup>按住 录音</button> </view>
2.index.wxss
/**index.wxss**/ .speak-style{ position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: #26A5FF; } .item-style{ margin-top: 30rpx; margin-bottom: 30rpx; } .text-style{ text-align: center; } .record-style{ position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100%; } .btn-style{ margin-left: 30rpx; margin-right: 30rpx; } .sound-style{ position: absolute; width: 74rpx; height:150rpx; margin-top: 45rpx; margin-left: 83rpx; } .board { overflow: hidden; border-bottom: 2rpx solid #26A5FF; } /*列布局*/ .cell{ display: flex; margin: 20rpx; } .cell-hd{ margin-left: 10rpx; color: #885A38; } .cell .cell-bd{ flex:1; position: relative; } /**只显示一行*/ .date{ font-size: 30rpx; text-overflow: ellipsis; white-space:Nowrap; overflow:hidden; }
3.index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { j: 1,//帧动画初始图片 isspeaking: false,//是否正在说话 voices: [],//音频数组 }, onLoad: function () { }, //手指按下 touchdown: function () { console.log(手指按下了...) console.log(new date : + new Date) var _this = this; speaking.call(this); this.setData({ isspeaking: true }) //开始录音 wx.startRecord({ success: function (res) { //临时路径,下次进入小程序时无法正常使用 var tempFilePath = res.tempFilePath console.log(tempFilePath: + tempFilePath) //持久保存 wx.saveFile({ tempFilePath: tempFilePath, success: function (res) { //持久路径 //本地文件存储的大小限制为 100M var savedFilePath = res.savedFilePath console.log(savedFilePath: + savedFilePath) } }) wx.showToast({ title: '恭喜!录音成功', icon: 'success', duration: 1000 }) //获取录音音频列表 wx.getSavedFileList({ success: function (res) { var voices = []; for (var i = 0; i < res.fileList.length; i++) { //格式化时间 var createTime = new Date(res.fileList[i].createTime) //将音频大小B转为KB var size = (res.fileList[i].size / 1024).toFixed(2); var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; console.log(文件路径: + res.fileList[i].filePath) console.log(文件时间: + createTime) console.log(文件大小: + size) voices = voices.concat(voice); } _this.setData({ voices: voices }) } }) }, fail: function (res) { //录音失败 wx.showModal({ title: '提示', content: '录音的姿势不对!', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') return } } }) } }) }, //手指抬起 touchup: function () { console.log(手指抬起了...) this.setData({ isspeaking: false, }) clearInterval(this.timer) wx.stopRecord() }, //点击播放录音 gotoPlay: function (e) { var filePath = e.currentTarget.dataset.key; //点击开始播放 wx.showToast({ title: '开始播放', icon: 'success', duration: 1000 }) wx.playVoice({ filePath: filePath, success: function () { wx.showToast({ title: '播放结束', icon: 'success', duration: 1000 }) } }) } }) //麦克风帧动画 function speaking() { var _this = this; //话筒帧动画 var i = 1; this.timer = setInterval(function () { i++; i = i % 5; _this.setData({ j: i }) }, 200); }
注意:
1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.
2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.
3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档
相关推荐:
原文地址:https://www.jb51.cc/weapp/1202495.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。