Bagaimana untuk mengimport muzik vue

Dengan perkembangan berterusan dan mempopularkan teknologi Internet, muzik telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian manusia. Vue, rangka kerja bahagian hadapan yang popular, juga memudahkan pembangunan tapak web muzik. Walau bagaimanapun, apabila menggunakan Vue untuk membangunkan laman web muzik, cara mengimport fail muzik adalah sesuatu yang perlu diberi perhatian. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk mengimport muzik.

1. Import fail audio melalui src

Dalam komponen Vue, anda boleh mengimport imej dan fail video dengan menggunakan teg img dan video dalam templat Begitu juga, anda boleh menggunakan audio dalam teg templat untuk mengimport fail audio.

Contoh kod:

<template>
  <div>
    <audio src="./audio/music.mp3"></audio>
  </div>
</template>

"./audio/music.mp3" di sini ialah laluan relatif, yang bermaksud bahawa di bawah folder audio dalam projek semasa, terdapat fail bernama muzik Fail audio .mp3. Anda boleh mengubah suainya kepada laluan fail dan nama fail anda sendiri mengikut situasi sebenar. Dengan kaedah ini, anda hanya boleh mengimport fail audio dalam komponen Vue dan memainkannya dalam halaman.

2. Gunakan sintaks modular ES6

Apabila membangun dengan Vue, ia sering digabungkan dengan webpack untuk pembungkusan dan pembinaan. Fail audio boleh diimport ke dalam komponen vue sebagai modul dengan menggunakan sintaks modular ES6.

1. Pasang pemuat fail

Mula-mula, anda perlu memasang pemuat fail. Gunakan arahan berikut dalam terminal untuk memasang:

npm install file-loader --save-dev

2. Buat fail audio.js baharu

Buat fail audio.js baharu dalam direktori src dan tulis kod berikut di dalamnya :

import music from "./audio/music.mp3";

export default {
  music
}

Sintaks modular ES6 digunakan di sini, music.mp3 diimport ke dalam fail audio.js dan pembolehubah bernama muzik dieksport melalui lalai eksport. Dengan cara ini, music.mp3 menjadi fail modul yang boleh diimport dan digunakan dalam komponen lain.

3. Gunakan

dalam komponen vue Dalam komponen vue yang perlu menggunakan fail audio, anda boleh menggunakan pernyataan import untuk memperkenalkan fail audio:

.

<script>
import audio from '@/audio';

export default {
  name: "Music",
  data() {
    return {
      music: audio.music
    }
  }
}
</script>

<template>
  <div>
    <audio :src="music" controls>
      Your browser does not support the audio element.
    </audio>
  </div>
</template>

Di sini "@/audio" mewakili kandungan yang dieksport dalam fail audio.js dalam direktori src. Gunakan :src untuk mengikat data dan hantar alamat fail audio ke dalam tag audio untuk memainkan fail audio pada halaman.

3. Gunakan pemalam pihak ketiga

Jika menyusahkan untuk mengimport fail audio menggunakan kaedah di atas, anda juga boleh mempertimbangkan untuk menggunakan pemalam pihak ketiga. Berikut ialah beberapa pemalam audio Vue yang biasa digunakan:

1. vue-audio: Gunakan Vue.js untuk mencipta pemalam yang memainkan audio halaman web.

Alamat Github: https://github.com/shershen08/vue-audio

2. vue-audio-player: pemalam pemain audio berdasarkan Vue. js , menyokong memainkan audio tempatan dan dalam talian.

Alamat Github: https://github.com/shawjia/vue-audio-player

3. vue-audio-recorder: Vue.js audio recorder plug-in , Menyokong fungsi seperti merakam audio, memainkan audio yang dirakam, menjeda rakaman dan memadamkan audio yang dirakam.

Alamat Github: https://github.com/grishkovelli/vue-audio-recorder

Pemalam di atas boleh dipilih dan digunakan mengikut keperluan khusus.

Ringkasan:

Artikel ini memperkenalkan tiga kaedah biasa untuk mengimport fail audio dalam Vue, iaitu memperkenalkan fail audio melalui src, menggunakan sintaks modular ES6 untuk mengimport fail audio dan menggunakan pemalam pihak ketiga . Apabila membangunkan tapak web muzik, memilih kaedah yang sesuai untuk mengimport fail audio boleh menjadikan pembangunan lebih cekap, kod lebih mudah dan pengalaman pengguna lebih baik.

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