uniapp使用录音

最新推荐文章于 2024-06-13 14:29:24 发布

gx_0713

最新推荐文章于 2024-06-13 14:29:24 发布

阅读量369

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/gx_0713/article/details/131727999

版权

<template>
  <view class="WH">
    <u--form :model="formData" :rules="rules" ref="uForm" labelPosition="left" labelWidth="110px" class="width paddingL40 paddingLR32 bgWhite text-right-form">
      <u-form-item label="录音：" borderBottom>
        <view class="viaTion">
          <view v-for="(item, index) in soundsList" :key="index" style="display: flex">
            <text @click="playVoice(item)">
              {{ item.fileName }}
            </text>
            <view class="icon_close" @click="soundClose(item, index)"> </view>
          </view>
          <nb-voice-record v-if="soundsList && soundsList.length < 9" @startRecord="start" @endRecord="end" @cancelRecord="cancel"></nb-voice-record>
        </view>
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      soundsList: [],
      rules: {}
    };
  },

  mounted() {},
  methods: {
    //播放录音
    playVoice(item) {
      let _this = this;
      if (item.filePath) {
        const failAudio = uni.createInnerAudioContext();
        failAudio.src = this.$http.config.baseUrl + "/preview/" + item.filePath;
        failAudio.play();
      }
    },
    //删除录音
    soundClose(item, index) {
      this.soundsList.splice(index, 1);
    },
    // 开始录音
    start() {},
    // 结束录音并处理得到的录音文件
    // event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
    end(event) {
      this.sounds = event;
      //发送录音：
      return new Promise((resolve, reject) => {
        let url = "";
        // #ifdef APP-PLUS
        url = this.$http.config.baseUrl + "/api/file/fileUpOne";
        // #endif
        // #ifdef H5
        url = "/api/file/fileUpOne";
        // #endif
        let a = uni.uploadFile({
          url: url,
          filePath: event.tempFilePath,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              let a = JSON.parse(res.data);
              this.soundsList.push(a.data);
            }, 1000);
          },
          fail: function () {},
        });
      });
    },
    // 用户取消录音
    cancel() {},
  },
};
</script>

<style lang="scss">
.viaTion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>

下载插件很全面的~

nbVoiceRecord长按录音动画组件，多端权限判断，可监听开始、结束、取消事件 - DCloud 插件市场