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


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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
webpack4 从零学习常用配置(小结)
May 28 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
学习ExtJS table布局
2009/10/08 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
对python模块中多个类的用法详解
2019/01/10 Python
python pillow模块使用方法详解
2019/08/30 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
经理秘书岗位职责
2013/11/14 职场文书
社区工作者感言
2014/03/02 职场文书
班组长岗位职责
2014/03/03 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书