Bagaimana untuk mengimport lagu ke dalam muzik vue

Dengan perkembangan teknologi Internet, muzik telah menjadi bahagian yang amat diperlukan dalam kehidupan orang moden. Dalam antara muka main balik muzik, Vue.js, sebagai salah satu rangka kerja JavaScript yang paling popular pada masa ini, popular untuk kod ringkas dan kebolehulangan yang tinggi. Jadi, bagaimana untuk mengimport lagu semasa membina pemain muzik menggunakan Vue.js? Di bawah ini kami akan memperkenalkan kaedah import lagu Vue.js secara terperinci.

Pertama sekali, sila pastikan anda telah memasang Vue.js dan mengimport Vue.js dalam projek anda.

1. Buat senarai lagu

Mula-mula, buat senarai lagu dalam projek Vue.js anda. Memandangkan kebolehskalaan program, kami tidak mengesyorkan mengisi secara manual setiap lagu dalam fail html, tetapi menggunakan fungsi mengikat data Vue.js untuk menjana senarai lagu secara automatik.

Anda boleh menulis kod berikut di dalam komponen Vue.js:

<template>
  <div>
    <ul>
      <li v-for="song in songs">
        {{song.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'src': 'http://xxx.mp3'},
          {'name': '歌曲2', 'src': 'http://xxx.mp3'},
          {'name': '歌曲3', 'src': 'http://xxx.mp3'}
        ]
      }
    }
  }
</script>

Kod ini secara automatik akan menjana senarai tiga lagu dalam halaman anda. Anda perlu menggantikan tatasusunan songs dengan senarai lagu anda.

2. Import fail sumber lagu

Kini, anda telah berjaya menjana senarai lagu dan menetapkannya kepada atribut songs komponen Vue.js. Seterusnya, kita perlu mengimport fail sumber lagu ke dalam projek.

Anda boleh mengimport fail sumber lagu dalam komponen Vue.js melalui kod berikut:

<template>
  <div>
    <ul>
      <li v-for="(song, index) in songs">
        <audio :src="song.url + '/' + song.fileName"></audio>
        {{song.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'url': 'http://xxx.com/songs', 'fileName': 'song1.mp3'},
          {'name': '歌曲2', 'url': 'http://xxx.com/songs', 'fileName': 'song2.mp3'},
          {'name': '歌曲3', 'url': 'http://xxx.com/songs', 'fileName': 'song3.mp3'}
        ]
      }
    }
  }
</script>

Kod ini mengemas kini senarai lagu kepada fail yang mengandungi nama lagu, laluan dan fail tempat fail sumber lagu terletak Tatasusunan objek nama, dan gunakan teg <audio> untuk mengimport setiap fail sumber lagu ke dalam halaman sebagai blok komponen Vue.js.

3. Melaksanakan main balik lagu

Selepas melengkapkan import lagu, kami juga perlu melaksanakan fungsi main balik lagu.

Anda boleh menggunakan kod Vue.js berikut untuk memainkan lagu:

<template>
  <div>
    <ul>
      <li v-for="(song, index) in songs" 
        @click="playSong(index)">
        {{song.name}}
      </li>
      <audio ref="player"></audio>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'url': 'http://xxx.com/songs', 'fileName': 'song1.mp3'},
          {'name': '歌曲2', 'url': 'http://xxx.com/songs', 'fileName': 'song2.mp3'},
          {'name': '歌曲3', 'url': 'http://xxx.com/songs', 'fileName': 'song3.mp3'}
        ]
      }
    },
    methods: {
      playSong (index) {
        let player = this.$refs.player
        player.src = this.songs[index].url + '/' + this.songs[index].fileName
        player.play()
      }
    }
  }
</script>

Kod ini mengandungi kaedah playSong(index) , yang dicetuskan apabila pengguna mengklik pada senarai lagu dan akan menentukan Tambah laluan fail sumber lagu ke atribut <audio> teg src dalam Vue.js, dan panggil kaedah play() untuk memainkan lagu.

Kini, anda telah berjaya membina pemain muzik ringkas menggunakan Vue.js dan berjaya mengimport lagu.

Ringkasan:

Vue.js ialah rangka kerja javascript yang sangat baik, yang memberikan kami banyak kemudahan. Dalam artikel ini, kami memperkenalkan kaedah menggunakan Vue.js untuk mengimport lagu dan merealisasikan main balik lagu. Jika anda belum biasa dengan Vue.js, saya harap artikel ini akan membantu anda.

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