Bagaimana untuk menambah rakaman anda sendiri dalam vue

Cara menambah rakaman anda sendiri dalam Vue

Dengan populariti Internet mudah alih, rakaman audio secara beransur-ansur menjadi ciri standard bagi banyak aplikasi. Contohnya, aplikasi seperti nota audio dan pembelajaran bahasa semuanya memerlukan fungsi rakaman suara. Ia juga sangat mudah untuk menambah fungsi rakaman anda sendiri dalam rangka kerja Vue. Di bawah ini kami akan memperkenalkan cara menambah rakaman anda sendiri dalam Vue.

1. Pasang kebergantungan

Vue melaksanakan fungsi rakaman dengan memasang kebergantungan pihak ketiga. Kita boleh menggunakan perpustakaan dengan nama Cina "Recorder" dan memasangnya melalui npm:

npm install record-vue

2. Tambah komponen rakaman

Seterusnya kita perlu menambah ia dalam Vue Tambah komponen rakaman ini membolehkan anda merakam audio dengan mudah dan menyimpan audio yang dirakam dalam storan penyemak imbas. Mari kita lihat kod berikut: 🎜>import RecordComponent daripada "@/components/RecordComponent.vue";

eksport lalai {

nama: "App",

komponen: {

  <div>
    <button @click="start">开始录制</button>
    <button @click="stop">停止录制</button>
    <audio ref="audio"></audio>
  </div>
</template>

<script>
import Record from 'record-vue';

export default {
  name: 'RecordComponent',

  components: {
    Record
  },

  data() {
    return {
      mediaRecorder: null,
    }
  },

  methods: {
    start() {
      this.mediaRecorder = this.$refs.recorder.getMediaRecorder();
      this.mediaRecorder.start();
    },

    stop() {
      this.mediaRecorder.stop();
    }
  },

  mounted() {
    this.mediaRecorder = this.$refs.recorder.getMediaRecorder();

    this.mediaRecorder.ondataavailable = (blob) => {
      const audio = this.$refs.audio;
      audio.src = URL.createObjectURL(blob);
    }
  }
}
</script>```

三、使用录音组件

通过上面的代码，我们定义了一个包含开始录制、停止录制和音频播放的录音组件。现在，我们只需要在需要使用录音的组件中引入录音组件，然后使用它即可。例如，我们可以在下面的代码中使用录音组件：

},

};

Kami menggunakan komponen rakaman ini sebagai subkomponen komponen Vue yang lain, kemudian mulakan fungsi rakaman dengan mengklik butang, dan hentikan rakaman apabila rakaman tamat . Sudah tentu, dalam aplikasi sebenar, anda boleh menyesuaikannya mengikut keperluan anda sendiri.

4. Ringkasan

Artikel ini memperkenalkan langkah-langkah untuk menambah fungsi rakaman anda sendiri dalam Vue. Untuk melaksanakan fungsi rakaman dalam Vue, anda perlu menggunakan pustaka pihak ketiga, kemudian tambah komponen rakaman dan memperkenalkannya di tempat rakaman diperlukan. Kini, anda boleh cuba menambah fungsi rakaman anda sendiri dalam Vue dan ketahui lebih lanjut tentang Vue.

Atas ialah kandungan terperinci Bagaimana untuk menambah rakaman anda sendiri dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!