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


Posted in Javascript onDecember 08, 2016

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

老规矩,先几张图.

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.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档

demo代码下载:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
Vue自定义指令介绍(2)
Dec 08 #Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 #Javascript
解析利用javascript如何判断一个数为素数
Dec 08 #Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 #Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 #Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 #Javascript
浅谈JavaScript的闭包函数
Dec 08 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
浅谈javascript原型链与继承
2015/07/13 Javascript
初识Javascript小结
2015/07/16 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python实现人人网登录示例分享
2014/01/19 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python绘制热力图示例
2019/09/27 Python
Python hashlib模块加密过程解析
2019/11/05 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
大学生最常用的自我评价
2013/12/07 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
文秘求职信范文
2014/04/10 职场文书
财务负责人岗位职责
2015/02/03 职场文书
公司地址变更通知
2015/04/25 职场文书
小学语文新课改心得体会
2016/01/22 职场文书