微信小程序开发之录音机音频播放动画 (真机可用)

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评!

老规矩,先几张图.

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.tempFilePathconsole.log("tempFilePath: " + tempFilePath)//持久保存wx.saveFile({tempFilePath: tempFilePath,success: function (res) {//持久路径//本地文件存储的大小限制为 100Mvar savedFilePath = res.savedFilePathconsole.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转为KBvar 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.音频播放不能同时播放多个音频.看文档.微信小程序播放音频文档

demo代码下载

我的博客:http://blog.csdn.net/qq_31383345

欢迎批评!

微信小程序开发之录音机音频播放动画 (真机可用)相关推荐

微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...
微信小程序开发：一个音乐播放器
github源码地址花了点时间撸了个微信小程序,分两个部分,音乐播放界面和音乐列表. 总结一下遇到的问题 UI分4层,第一层背景高斯模糊,第二层灰色半透明蒙层,第三层播放器,第四层列表 css设置背 ...
微信小程序腾讯地图自定样式真机不生效
昨天讲到微信小程序引用腾讯地图自定义样式,在开发者工具一切都是正常的,但是使用手机进行预览,发现自定义的样式根本不生效,然后试了几种解决方案都不行,去官网提工单,感觉官方人员跟机器人呢,刚刚又看到一种 ...
微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
010 - 微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
微信小程序开发之『侧边栏滑动』特效
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音 ...
微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 微信小程序开发之录音机音频播放动画 (真机可用) 先上gif: 再上几张 ...

微信小程序开发之录音机音频播放动画 (真机可用)

微信小程序开发之录音机音频播放动画 (真机可用)相关推荐

最新文章

热门文章

微信小程序开发之录音机 音频播放 动画 (真机可用)

微信小程序开发之录音机 音频播放 动画 (真机可用)相关推荐

最新文章

热门文章

微信小程序开发之录音机音频播放动画 (真机可用)

微信小程序开发之录音机音频播放动画 (真机可用)相关推荐