经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现录音Record功能
来源:jb51  时间:2021/5/10 8:45:51  对本文有异议

本文实例为大家分享了微信小程序实现录音Record功能的具体代码,供大家参考,具体内容如下

布局

  1. <!--pages/record/record.wxml-->
  2. <view>
  3. <button
  4. class="tui-menu-list"
  5. bindtap="startRecordAac"
  6. type="primary">录音开始(aac)</button>
  7. <button
  8. class="tui-menu-list"
  9. bindtap="startRecordMp3"
  10. type="primary">录音开始(mp3)</button>
  11. <button
  12. class="tui-menu-list"
  13. bindtap="stopRecord"
  14. type="primary">录音结束</button>
  15. <button
  16. class="tui-menu-list"
  17. bindtap="playRecord"
  18. type="primary">播放录音</button>
  19. </view>

样式:

  1. /* pages/record/record.wxss */
  2. .tui-menu-list{
  3. flex-direction: row;
  4. margin: 20rpx;
  5. padding: 20rpx;
  6. }

开始录音和停止录音

  1. // pages/record/record.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. },
  8. onLoad:function (options) {
  9. var that = this
  10. this.recorderManager = wx.getRecorderManager();
  11. this.recorderManager.onError(function () {
  12. that.tip("录音失败!");
  13. })
  14. this.recorderManager.onStop(function (res) {
  15. that.setData({
  16. src:res.tempFilePath
  17. })
  18. console.log(res.tempFilePath)
  19. that.tip("录音完成!")
  20. })
  21. this.innerAudioContext = wx.createInnerAudioContext()
  22. this.innerAudioContext.onError((res) =>{
  23. that.tip("播放录音失败!")
  24. })
  25. },
  26. //提示
  27. tip:function (msg) {
  28. wx.showModal({
  29. cancelColor: 'cancelColor',
  30. title:'提示',
  31. content:msg,
  32. showCancel:false
  33. })
  34. },
  35. //录制aac
  36. startRecordAac:function () {
  37. this.recorderManager.start({
  38. format:'aac'
  39. })
  40. },
  41. //录制mp3
  42. startRecordMp3:function () {
  43. this.recorderManager.start({
  44. format:'mp3'
  45. })
  46. },
  47. //停止录音
  48. stopRecord:function () {
  49. this.recorderManager.stop()
  50. },
  51. //播放录音
  52. playRecord:function () {
  53. var that = this
  54. var src = this.data.src
  55. if (src='') {
  56. this.tip('请先录音')
  57. return
  58. }
  59. this.innerAudioContext.src = this.data.src
  60. this.innerAudioContext.play()
  61. }
  62. })

效果图:

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号