本篇文章主要介绍一下以下功能:

用小程序实现录音功能,在本地播放,提交服务端,服务端播放。

中间遇到了一些坑,找到了一些解决方法,如果有更优的解决方案希望你能在评论留言,一起加油。

1.小程序端

图片描述

前端展示页面,小程序采用数据绑定方式,这里正在录音和正在播放的状态切换,用两张图根据录音状态和播放状态切换,这里就不多说了。

长按开始录音,触发录音事件,松手执行录音结束,将录音结果保存在本地。

  1. /**
  2. * 开始录音
  3. */
  4. startRecord: function () {
  5. var that = this
  6. that.setData({
  7. isRecording: true,
  8. });
  9. whisper.startRecord({
  10. success(result) {
  11. that.setData({
  12. isRecording: false,
  13. });
  14. console.log(\'录音成功:\', result);
  15. console.log(\'录音成功:\', result.tempFilePath);
  16. //提交录音
  17. var src = result.tempFilePath;
  18. var name = \'record\'
  19. repair.uploadRecord(src, name, (res) => {
  20. that.data.recordObj.record = res;
  21. });
  22. },
  23. fail(error) {
  24. console.log(\'录音失败:\', error);
  25. },
  26. process() {
  27. that.setData({
  28. duration: whisper.getRecordDuration(),
  29. });
  30. },
  31. compelete() {
  32. },
  33. });
  34. },
  35. /**
  36. * 停止录音
  37. */
  38. stopRecord: function () {
  39. var that = this;
  40. whisper.stopRecord({
  41. success(result) {
  42. that.setData({
  43. isRecording: false,
  44. });
  45. console.log(\'停止录音:\', result);
  46. },
  47. fail(error) {
  48. console.log(\'停止录音失败:\', error);
  49. }
  50. });
  51. },
  52. /**
  53. * 播放录音
  54. */
  55. play: function () {
  56. var that = this
  57. that.setData({
  58. isPlaying:
版权声明:本文为yangchunlong原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/yangchunlong/articles/9104107.html