base_ui/components/other/MyPluginAudioRecorder.vue

<template>
  <div class="vue-record-container">
    <vue-record-audio mode="press" @stream="onStream" @result="onResult">
    </vue-record-audio>

    <button
      v-if="recording"
      @click.prevent="removeRecordFile()"
      class="btn send-record-btn"
    >
      <svg class="icon icon-Component-295--1">
        <use xlink:href="#icon-Component-295--1"></use>
      </svg>
    </button>
  </div>
  <!-- <vue-record-audio @result="onResult" /> -->
  <!-- <Component :mode="'press'" @stream="onStream" @result="onResult" /> -->
</template>

<script>
// import "assets/common/js/RecordRTC.js";

export default {
  mounted() {
    // this.uuid = Math.floor(Math.random() * 100);
    // addJsCssFileToDom("/js/RecordRTC.js", "js", this.uuid);
    // this.getLocalStream();
  },
  destroy() {
    this.recorder?.removeEventListener("dataavailable", onDataAvailable);
    this.recorder?.removeEventListener("stop", onStopRecording);
  },
  data() {
    return {
      newAudio: null,
      recorder: null,
      saveAudio: false,
      recordedChunks: [],
    };
  },
  computed: {
    // newAudioURL() {
    //   return URL.createObjectURL(this.newAudio);
    // },
  },
  methods: {
    onStream(mediaStream) {
      // در صورت استفاده از پلاگین
      this.mediaStream = mediaStream;
      this.recording = true;
    },
    replayOnStream() {

      this.replayRecording = true;
    },
    onStopRecording() {
      const audioTracks = this.mediaStream.getAudioTracks();
      audioTracks.forEach((element) => {
      element.stop();
      });

      this.recording = false;
    },
    removeRecordFile() {
      this.refreshRecorder++;
      this.recording = false;
      this.abortRecord = true;
    },
    replayRemoveRecordFile() {
      this.replayRefreshRecorder++;
      this.replayRecording = false;
      this.replayAbortRecord = true;
    },


    onDataAvailable(e) {
      this.recordedChunks = [];

      this.$emit("onStream");

      if (e.data.size > 0) {
        this.recordedChunks.push(e.data);
      }
    },
    onStopRecording(mediaStream2) {
      this.newAudio = new Blob(this.recordedChunks);
      this.recorder.stop();

      const audioTracks = mediaStream2.target.stream.getAudioTracks();

      audioTracks.forEach((element) => {
        element.stop();
      });

      this.recorder = null;

      if (this.saveAudio) this.$emit("send", this.newAudio);
    },
    async record() {
      this.newAudio = null;

      try {
        const mediaStream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: false,
        });

        // const options = { mimeType: "audio/webm" };
        // this.recorder = new MediaRecorder(mediaStream, options);
        this.recorder = new MediaRecorder(mediaStream);
        this.recorder.start();

        this.recorder.addEventListener("dataavailable", this.onDataAvailable);

        this.recorder.addEventListener("stop", this.onStopRecording);
      } catch (err) {

        mySwalToast({
          title:
            "مرورگر شما از قابلیت ارسال صدا پشتیبانی نمیکند.لطفا مرورگر خود را به آخرین ورژن ارتقا دهید.",
          icon: "error",
          timer: 7000,
        });
      }
    },
    stop() {
      this.saveAudio = true;
      this.recorder.stop();
    },
    cancel() {
      this.saveAudio = false;
      this.recorder.stop();
    },

  },
};
</script>

<style scoped lang="scss">
// .vue-audio-recorder {
// position: relative;
// background-color: #4db6ac;
// border-radius: 50%;
// width: 64px;
// height: 64px;
// display: inline-block;
// cursor: pointer;
// -webkit-box-shadow: 0 0 0 0 rgba(232,76,61,.7);
// box-shadow: 0 0 0 0 rgba(232,76,61,.7);

// width: 1.9em;
// height: 1.9em;
// padding: 0.5em;
// background-size: 70%;
// background-position: center center;
// background-repeat: no-repeat;

// &.active {
// background-color: #ef5350;
// -webkit-animation: pulse 1.25s cubic-bezier(.66,0,0,1) infinite;
// animation: pulse 1.25s cubic-bezier(.66,0,0,1) infinite;
// }
// }
</style>