当前位置:   article > 正文

uniapp录音功能

uniapp录音
  1. <template>
  2. <view class="">
  3. <view>
  4. <button @tap="startRecord">开始录音</button>
  5. <button @tap="endRecord">停止录音</button>
  6. <button @tap="playVoice">播放录音</button>
  7. </view>
  8. <button @tap="junp">选择文件</button>
  9. <!-- <luch-audio
  10. v-if="voicePath"
  11. :src="voicePath"
  12. :play.sync="audioPlayNew"
  13. ></luch-audio> -->
  14. </view>
  15. </template>
  16. <script>
  17. const recorderManager = uni.getRecorderManager();
  18. const innerAudioContext = uni.createInnerAudioContext();
  19. innerAudioContext.autoplay = true;
  20. export default {
  21. data() {
  22. return {
  23. text: 'uni-app',
  24. voicePath: '',
  25. url: ''
  26. };
  27. },
  28. onLoad() {
  29. let self = this;
  30. recorderManager.onStop(function(res) {
  31. console.log('recorder stop' + JSON.stringify(res));
  32. self.voicePath = res.tempFilePath;
  33. self.downloadFile(res.tempFilePath);
  34. });
  35. },
  36. methods: {
  37. junp() {
  38. uni.navigateTo({
  39. url: '../xuanze/xuanze'
  40. });
  41. },
  42. startRecord() {
  43. console.log('开始录音');
  44. recorderManager.start();
  45. },
  46. endRecord() {
  47. console.log('录音结束');
  48. recorderManager.stop();
  49. },
  50. playVoice() {
  51. console.log('播放录音');
  52. if (this.voicePath) {
  53. innerAudioContext.src = this.voicePath;
  54. innerAudioContext.play();
  55. }
  56. },
  57. downloadFile(url) {
  58. console.log(url);
  59. const downloadTask = uni.downloadFile({
  60. url: url, //文件链接
  61. success: res => {
  62. if (res.statusCode === 200) {
  63. uni.saveFile({
  64. tempFilePath: res.tempFilePath,
  65. success: red => {
  66. console.log(1, red.savedFilePath);
  67. uni.showToast({
  68. icon: 'none',
  69. mask: true,
  70. title: '文件已保存:' + red.savedFilePath, //保存路径
  71. duration: 3000
  72. });
  73. setTimeout(() => {
  74. //打开文档查看
  75. uni.openDocument({
  76. filePath: red.savedFilePath,
  77. success: function(res) {
  78. console.log('打开文档成功');
  79. }
  80. });
  81. }, 3000);
  82. }
  83. });
  84. }
  85. },
  86. fail: err => {
  87. uni.showToast({
  88. icon: 'none',
  89. mask: true,
  90. title: '失败请重新下载'
  91. });
  92. }
  93. });
  94. }
  95. // //*** 先删除本地文件
  96. // deleteFile(url) {
  97. // uni.getSavedFileList({
  98. // success:(res)=> {
  99. // if (res.fileList.length > 0) {
  100. // uni.removeSavedFile({
  101. // filePath: res.fileList[0].filePath,
  102. // complete: function(res) {
  103. // this.downloadFile(url)
  104. // }
  105. // });
  106. // } else{
  107. // this.downloadFile(url)
  108. // }
  109. // }
  110. // });
  111. // },
  112. // //*** 再下载文件
  113. // downloadFile(url){
  114. // uni.downloadFile({
  115. // url: url, //下载地址接口返回
  116. // success: (data) => {
  117. // if (data.statusCode === 200) {
  118. // //文件保存到本地
  119. // uni.saveFile({
  120. // tempFilePath: data.tempFilePath, //临时路径
  121. // success: function(res) {
  122. // // this.url = res.savedFilePath;
  123. // uni.setStorageSync('url', res.savedFilePath);
  124. // }
  125. // });
  126. // }
  127. // },
  128. // fail: (err) => {
  129. // uni.showToast({
  130. // icon: 'none',
  131. // mask: true,
  132. // title: '失败请重新下载',
  133. // });
  134. // },
  135. // });
  136. // },
  137. }
  138. };
  139. </script>
  140. <style>
  141. .content {
  142. display: flex;
  143. flex-direction: column;
  144. align-items: center;
  145. justify-content: center;
  146. }
  147. .logo {
  148. height: 200rpx;
  149. width: 200rpx;
  150. margin-top: 200rpx;
  151. margin-left: auto;
  152. margin-right: auto;
  153. margin-bottom: 50rpx;
  154. }
  155. .text-area {
  156. display: flex;
  157. justify-content: center;
  158. }
  159. .title {
  160. font-size: 36rpx;
  161. color: #8f8f94;
  162. }
  163. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/899897
推荐阅读
相关标签
  

闽ICP备14008679号