photo_uniapp/meeting/online/index.vue

<template>
  <div class="container">
    <meet-sticky :bg="bg">
      <meet-navbar title="会议中" :isFixed="false"></meet-navbar>
    </meet-sticky>
    <view class="list" v-for="(item, index) in 10">
      <view class="flex-left color-1">1</view>
      <view class="flex-child">
        <view class="flex-center">我公司碳中和具体的应用场景包括以下几方面:1.碳丝路APP-全民低碳场景的数据收集 碳普惠应用。 2.全国性碳交易平台数据。</view>
        <view class="flex-right">5"</view>
      </view>
    </view>
    <view class="footer">
      <image class="icon01" src="/static/image/online/online.gif"></image>
      <view class="footer-center">
        <view class="text-1">正在录音中</view>
        <view class="text-2"><span>00:12</span>/02:00:00</view>
      </view>
      <view class="footer-icon" @click="startRecord()" v-if="isRecording == false">
        <image class="img" src="/static/image/online/play.png"></image>
        <view class="text-1">开始</view>
      </view>
      <view class="footer-icon" @click="endRecord()" v-if="isRecording == true">
        <image class="img" src="/static/image/online/pause.png"></image>
        <view class="text-1">结束</view>
      </view>
      <view class="footer-icon">
        <image class="img" src="/static/image/online/stop.png"></image>
        <view class="text-1">结束</view>
      </view>
    </view>
    <!-- 弹框 -->
    <meet-pop :dialogShow="popConfig.show" :btnType="popConfig.btnType" :dialogTitle="popConfig.title"
      :CancelText="popConfig.CancelText" :ConfirmText="popConfig.ConfirmText" @handleConfirm="confirm"
      @handleCancel="cancel">
      <view class="popClass">
        结束后无法在本记录继续录音
      </view>
    </meet-pop>
  </div>
</template>

<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  components: {
  },
  data() {
    return {
      list: [],
      popConfig: {
        show: false,
        btnType: 2,
        title: "确定结束录音吗？",
        CancelText: "在考虑下",
        ConfirmText: "结束录音"
      },
      //录音
      recorderManager: null,
      innerAudioContext: {},
      isRecording: false,
    };
  },
  onLoad() {
    // this.recorderManager = uni.getRecorderManager();
    // console.log('recorderManager', this.recorderManager);
    // innerAudioContext.autoplay = true;
    // console.log("uni.getRecorderManager()", uni.getRecorderManager())
    // console.log("uni.createInnerAudioContext()", uni.createInnerAudioContext())
    // let self = this;
    // recorderManager.onStop(function (res) {
    //   console.log('recorder stop' + JSON.stringify(res));
    //   self.voicePath = res.tempFilePath;
    // });
  },
  methods: {
    confirm() {
      this.popConfig.show = false;
    },
    cancel() {
      this.popConfig.show = false;
    },
    startRecord() {
      console.log('开始录音');
      if (this.isRecording) return;
      this.isRecording = true;
      // const recorderManager = this.recorderManager;
      const options = {
        duration: 60000, // 录音的最大时长，单位 ms
        sampleRate: 8000, // 采样率
        numberOfChannels: 1, // 录音的 channel 数量
        encodeBitRate: 44100, // 编码码率
        format: 'mp3', // 音频格式，支持 'aac' 或 'mp3'
        frameSize: 20
      };
      recorderManager.start(options);
      recorderManager.onStart(() => {
        console.log('录音开始');
      });

      recorderManager.onFrameRecorded((res) => {
        // 实时获取录音进度回调
        const { frameBuffer } = res;
        console.log(frameBuffer);
      });

    },
    endRecord() {
      this.isRecording = false;
      // const recorderManager = this.recorderManager;
      recorderManager.onStop((res) => {
        console.log('录音结束', res.tempFilePath);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common.scss";

.container {
  min-height: 100vh;
  background-color: #d1dcfe;
  padding: 20rpx 0;
  padding-bottom: 200rpx;

  .list {
    display: flex;
    margin-top: 36rpx;
    padding: 0 24rpx;

    .flex-left {
      width: 56rpx;
      height: 56rpx;
      font-size: 36rpx;
      line-height: 56rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      font-weight: bold;
    }

    .color-1 {
      background-color: #70CD9E;
    }

    .flex-child {
      display: flex;
      align-items: flex-end;
      flex: 1;

      .flex-center {

        margin: 0 16rpx 0 16rpx;
        border: 1px solid #fff;
        background-color: rbga(255, 255, 255, 0.5);
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 16rpx 24rpx;
      }

      .flex-right {
        color: #23262B;
        font-size: 28rpx;
      }
    }

  }

  .footer {
    background: rgba(255, 255, 255, 1);
    border-top-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 180rpx;
    display: flex;
    box-sizing: border-box;
    padding: 12rpx 24rpx;

    .icon01 {
      width: 88rpx;
      height: 88rpx;
      border-radius: 24rpx;
      margin-right: 24rpx;
    }

    .footer-center {
      flex: 1;

      .text-1 {
        color: #23262B;
        font-size: 28rpx;
      }

      .text-2 {
        color: #93999F;
        font-size: 24rpx;

        span {
          color: #23262B;
        }
      }
    }

    .footer-icon {
      margin-right: 56rpx;

      .img {
        width: 48rpx;
        height: 48rpx;
      }

      .text-1 {
        color: #23262B;
        font-size: 22rpx;
      }
    }
  }

  .popClass {
    text-align: center;
    color: #4B5158;
    font-size: 28rpx;
  }
}
</style>