uniapp录音功能

简介: uniapp录音功能
<template>
  <view class="">
    <view>
      <button @tap="startRecord">开始录音</button>
      <button @tap="endRecord">停止录音</button>
      <button @tap="playVoice">播放录音</button>
    </view>
    <button @tap="junp">选择文件</button>
    <!-- <luch-audio 
        v-if="voicePath"
        :src="voicePath" 
        :play.sync="audioPlayNew"
      ></luch-audio> -->
  </view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  data() {
    return {
      text: 'uni-app',
      voicePath: '',
      url: ''
    };
  },
  onLoad() {
    let self = this;
    recorderManager.onStop(function(res) {
      console.log('recorder stop' + JSON.stringify(res));
      self.voicePath = res.tempFilePath;
      self.downloadFile(res.tempFilePath);
    });
  },
  methods: {
    junp() {
      uni.navigateTo({
        url: '../xuanze/xuanze'
      });
    },
    startRecord() {
      console.log('开始录音');
      recorderManager.start();
    },
    endRecord() {
      console.log('录音结束');
      recorderManager.stop();
    },
    playVoice() {
      console.log('播放录音');
      if (this.voicePath) {
        innerAudioContext.src = this.voicePath;
        innerAudioContext.play();
      }
    },
    downloadFile(url) {
      console.log(url);
      const downloadTask = uni.downloadFile({
        url: url, //文件链接
        success: res => {
          if (res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: red => {
                console.log(1, red.savedFilePath);
                uni.showToast({
                  icon: 'none',
                  mask: true,
                  title: '文件已保存:' + red.savedFilePath, //保存路径
                  duration: 3000
                });
                setTimeout(() => {
                  //打开文档查看
                  uni.openDocument({
                    filePath: red.savedFilePath,
                    success: function(res) {
                      console.log('打开文档成功');
                    }
                  });
                }, 3000);
              }
            });
          }
        },
        fail: err => {
          uni.showToast({
            icon: 'none',
            mask: true,
            title: '失败请重新下载'
          });
        }
      });
    }
    // //***  先删除本地文件
    // deleteFile(url) {
    //  uni.getSavedFileList({
    //    success:(res)=> {
    //             if (res.fileList.length > 0) {
    //        uni.removeSavedFile({
    //            filePath: res.fileList[0].filePath,
    //          complete: function(res) {
    //            this.downloadFile(url)
    //          }
    //        });
    //      } else{
    //        this.downloadFile(url)
    //      }
    //    }
    //  });
    // },
    // //***  再下载文件
    // downloadFile(url){
    //  uni.downloadFile({
    //    url: url,   //下载地址接口返回
    //    success: (data) => {
    //      if (data.statusCode === 200) {
    //        //文件保存到本地
    //        uni.saveFile({
    //          tempFilePath: data.tempFilePath,   //临时路径
    //          success: function(res) {
    //            // this.url = res.savedFilePath;
    //            uni.setStorageSync('url', res.savedFilePath);
    //          }
    //        });
    //      }
    //    },
    //    fail: (err) => {
    //      uni.showToast({
    //        icon: 'none',
    //        mask: true,
    //        title: '失败请重新下载',
    //      });
    //    },
    //  });
    // },
  }
};
</script>
<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
相关文章
|
3天前
|
JavaScript API
uniapp录音功能
uniapp录音功能
36 0
|
3天前
|
JavaScript API
uniapp录音功能
uniapp录音功能
|
8月前
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
3天前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
166 0
|
8月前
|
前端开发 API
uniapp录音功能
uniapp录音功能
95 0
|
10月前
|
JavaScript API
uniapp录音功能
uniapp录音功能
195 0
|
3天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
10 0
|
3天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1
|
3天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
17 1
|
3天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
25 0

热门文章

最新文章