图文详解微信小程序中调用录音功能和音频播放的方法

图文详解微信小程序中调用录音功能和音频播放的方法
这篇文章图文详解微信小程序中调用录音功能和音频播放的方法

老规矩,先几张图.

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>