Bagaimana untuk mengalih suara anda sendiri dalam vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak alatan dan teknologi yang membolehkan pembangun membina aplikasi web dinamik dengan cepat. Salah satu fungsi penting ialah peristiwa yang mengikat. Dalam Vue, kita boleh mengikat pelbagai acara, seperti mengklik butang, menyeret elemen, dsb. Tetapi kadangkala, kita juga perlu mengikat acara audio. Jadi, bagaimana untuk mengalih suara anda sendiri dalam Vue?

Langkah 1: Sediakan fail audio
Sebelum memulakan alih suara, kami perlu menyediakan fail audio yang sepadan. Biasanya kita boleh memuat turun beberapa bahan audio percuma dari Internet, atau menggunakan perisian muzik profesional untuk menghasilkannya sendiri. Katakan kita mempunyai fail audio bernama "music.mp3", dan kemudian kita perlu merujuk fail ini dalam Vue.

Langkah 2: Rujukan fail audio
Vue menyediakan pemalam "vue-audio", yang boleh membantu kami mengendalikan pelbagai acara audio dengan mudah. Mula-mula, rujuk pemalam ini dalam komponen Vue kami:

<script>
import VueAudio from 'vue-audio'
export default {
  components: {
    VueAudio
  }
}
</script>

Kemudian, gunakannya dalam templat:

<template>
  <vue-audio :src="require(&#39;./music.mp3&#39;)"></vue-audio>
</template>

Dalam kod di atas, kami lulus kaedah "memerlukan" Fail audio dirujuk. Sudah tentu, anda juga boleh merujuk menggunakan kaedah lain, seperti menggunakan URL secara langsung.

Langkah 3: Tambahkan acara audio
Setelah kami merujuk fail audio, kami boleh menambah pelbagai acara audio dalam Vue. Contohnya, anda boleh mengikat acara "main audio" pada butang:

<template>
  <button @click="playAudio">播放音频</button>
  <vue-audio ref="audio" :src="require(&#39;./music.mp3&#39;)" @ended="audioEnded"></vue-audio>
</template>

<script>
export default {
  methods: {
    playAudio() {
      this.$refs.audio.play()
    },
    audioEnded() {
      console.log('音频已结束')
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan acara "@ended" untuk mengesan sama ada audio telah tamat dan Cetak yang sepadan maklumat dalam konsol.

Ringkasan:
Proses alih suara dalam Vue tidak rumit Anda hanya perlu merujuk fail audio dan menambah acara yang sepadan. Jika anda memerlukan pengendalian acara audio yang lebih kompleks, anda boleh menggunakan pemalam lain yang disediakan oleh Vue atau membangunkan anda sendiri. Harap artikel ini membantu anda!

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