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


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接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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的call_user_func传reference引发的思考
2010/07/23 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
关于js类的定义
2011/06/28 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
关于layui时间回显问题的解决方法
2019/09/24 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python构建基础的爬虫教学
2018/12/23 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
国培远程培训感言
2014/03/08 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书