微信小程序开发之录音机 音频播放 动画实例

<!--index.wxml--> <scroll-view>  <view> <block>    <view>           <view>             <view>                <view>存储路径:{{item.filePath}}</view>               <view>存储时间:{{item.createTime}}</view>               <view>音频大小:{{item.size}}KB</view>             </view>                         </view>     </view> </block>  </view>  </scroll-view>   <view> <image></image> <image></image> <image></image> <image></image> <image></image>  </view>  <view>  <button>按住 录音</button>  </view>

 /**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;  }

//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 <p></p><p><strong>注意:</strong><br></p><p>1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.<br></p><p>2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.<br></p><p>3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档</p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p><p></p><p class="clearfix"><span class="jbTestPos"></span></p>