Bagaimana untuk mengimport muzik ke dalam vue

Vue telah menjadi salah satu rangka kerja bahagian hadapan paling popular dalam pembangunan web moden. Jika anda sedang membina aplikasi Vue dan ingin menambah fail muzik, artikel ini akan menunjukkan kepada anda cara mengimport fail muzik ke dalam projek Vue.

Langkah 1: Tambahkan fail muzik pada projek Vue

Dalam projek Vue, anda perlu menambah fail muzik pada mana-mana direktori berikut: public, src/assets. Ambil perhatian bahawa jika anda menambah fail muzik pada direktori awam, fail tersebut akan disalin ke direktori dist pada masa binaan.

Langkah Kedua: Akses Fail Muzik daripada Fail JavaScript

Untuk mengakses fail muzik dalam aplikasi Vue anda, anda perlu menambah beberapa kod JavaScript. Dalam komponen Vue, anda boleh mengakses fail muzik menggunakan kod seperti ini:

new Audio(require('@/assets/soundtrack.mp3')).play()

Di sini, kami menggunakan objek Audio baharu dan menghantarnya ke laluan URL fail muzik (nota: fail Laluan harus mulakan dengan @/aset/). Akhir sekali, kami memainkan muzik dengan memanggil kaedah play().

Langkah 3: Mainkan muzik dalam komponen Vue

Untuk memainkan muzik dalam komponen Vue, anda boleh menggunakan kod di atas dalam kaedah kitar hayat mount():

mounted() {
  new Audio(require('@/assets/soundtrack.mp3')).play()
}

Di sini, apabila komponen Vue dipasang pada pokok DOM, kami memulakan objek Audio baharu dan memainkan fail muzik.

Langkah 4: Kawal main balik muzik dalam komponen Vue

Jika anda ingin menambah lebih banyak pilihan kawalan untuk main balik muzik, seperti menjeda, berhenti, melaraskan kelantangan, dsb., sila gunakan kod berikut :

data() {
  return {
    audio: null,
    volume: 0.5,
    isPlaying: false
  }
},
mounted() {
  this.audio = new Audio(require('@/assets/soundtrack.mp3'))
  this.audio.volume = this.volume
},
methods: {
  togglePlay() {
    if (this.isPlaying) {
      this.audio.pause()
    } else {
      this.audio.play()
    }
    this.isPlaying = !this.isPlaying
  },
  stop() {
    this.audio.pause()
    this.audio.currentTime = 0
    this.isPlaying = false
  }
}

Di sini, kami mentakrifkan atribut data yang dipanggil 'audio', yang menjejaki fail audio. Kami juga mentakrifkan kaedah togglePlay() dan stop() untuk mengawal fail audio. Dalam kaedah togglePlay() kami menyemak sama ada audio sedang dimainkan dan memainkan atau menjeda audio seperti yang diperlukan. Dalam kaedah stop(), kami menghentikan audio dan menetapkan masa semasanya kepada 0.

Akhir sekali, kami berharap anda boleh berjaya menambahkan muzik dan mengawalnya dalam projek Vue anda. Ingat, ini hanyalah helah kecil dalam rangka kerja Vue, anda boleh menggunakan perpustakaan dan rangka kerja lain seperti jQuery dan React untuk mencapai hasil yang sama.

Atas ialah kandungan terperinci Bagaimana untuk mengimport muzik ke dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!