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


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(JS)替换节点实现思路介绍
Apr 17 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
viewer.js实现图片预览功能
Jun 24 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
小程序实现多列选择器
2019/02/15 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
python文件的md5加密方法
2016/04/06 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python中append函数用法讲解
2020/12/11 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
水果超市创业计划书
2014/01/27 职场文书
公司面试感谢信
2014/02/01 职场文书
研修第一天随笔感言
2014/02/15 职场文书
小班下学期评语
2014/05/04 职场文书
搞笑车尾标语
2014/06/23 职场文书
语文课外活动总结
2014/08/27 职场文书
统计学教授推荐信
2014/09/18 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题