Cara memadankan lagu dengan vue

Vue ialah rangka kerja JavaScript popular yang dengannya anda boleh membuat beberapa aplikasi web yang menakjubkan. Selain pelaksanaan bahagian hadapan, Vue juga menyediakan alatan untuk membina dan membungkus aplikasi menggunakan Vue CLI dan Vue Loader. Semasa menulis aplikasi web, anda selalunya perlu menggunakan pelbagai komponen UI seperti peluncur, tab dan kotak dialog. Walau bagaimanapun, dalam laman web mendengar muzik pada masa hadapan, kita biasanya perlu menggunakan pemain muzik, dan rangka kerja Vue itu sendiri tidak menyediakan fungsi ini Jadi bagaimana kita harus menggunakan pemain muzik dalam rangka kerja Vue? Mari kita bincangkan cara mengiringi lagu dalam rangka kerja Vue.

Pertama sekali, kita perlu mencari pemalam pemain muzik yang berguna Rangka kerja Vue tidak menyediakan fungsi ini. Terdapat banyak pemalam pemain muzik di pasaran, seperti APlayer, MetingJS, dll. Pemalam pemain ini sangat mudah digunakan, menyokong fail muzik dalam pelbagai format, dan juga menyokong fungsi seperti senarai main, main balik gelung dan main semula rawak. Kita boleh memilih pemalam pemain muzik yang sesuai dengan kita, dan kemudian memasang dan menggunakannya mengikut dokumentasi pemalam.

Daripada dua pemalam pemain muzik yang dinyatakan di atas, APlayer ialah pemalam pemain muzik berdasarkan HTML5 Ia dicirikan oleh kemudahan penggunaan, keserasian yang baik dan menyokong pelbagai format audio dan boleh digunakan Tersedia pada PC dan telefon mudah alih. MetingJS ialah pemalam pemain muzik berdasarkan WordPress Jika digunakan dalam rangka kerja Vue, ia perlu bekerjasama dengan MetingJS untuk memanggil NetEase Cloud API.

Langkah seterusnya ialah menggunakan pemalam pemain muzik dalam rangka kerja Vue. Kami perlu memasang dan mengkonfigurasi mengikut dokumentasi pemalam secara amnya menyediakan komponen untuk memudahkan penggunaan. Contohnya, apabila menggunakan pemalam APlayer, anda boleh terus menggunakan panggilan kod berikut:

<template>
   <div>
       <aplayer ref="aplayer"
                :audio="audio"
                :autoplay="true"
                :showlrc="1"
                :theme="#ebd0c2"
                :mutex="true"
                :preload="true"
          ></aplayer>
    </div>
</template>

Dalam kod ini, kami memanggil komponen pemain APlayer melalui teg <aplayer> dan menghantar beberapa parameter , seperti tetapan Senarai main, main balik automatik, kaedah paparan lirik, dsb. Dalam rangka kerja Vue, kami juga boleh menyesuaikan beberapa komponen untuk melaksanakan fungsi pemain muzik. Contohnya, kita boleh menyesuaikan komponen kawalan pemain untuk mengawal main balik muzik, jeda, kemajuan, dsb. Kodnya adalah seperti berikut:

<template>
  <div class="player-control">
    <button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
    <div class="progress" :style="{ width: progressPercent + &#39;%&#39; }"></div>
  </div>
</template>

<script>
export default {
  name: 'PlayerControl',
  props: {
    playing: Boolean,
    progress: Number,
  },
  computed: {
    progressPercent() {
      return this.progress / this.duration * 100;
    },
  },
  methods: {
    togglePlay() {
      this.$emit('togglePlay');
    },
  },
};
</script>

Dalam komponen tersuai ini, kami mentakrifkan butang main/jeda dan bar kemajuan dan mengawal lebar bar kemajuan melalui sifat yang dikira. Dalam kaedah, kami mentakrifkan kaedah togglePlay untuk mengawal keadaan main/jeda pemain Kaedah ini dicetuskan apabila butang diklik dan dihantar ke komponen induk melalui acara.

Untuk meringkaskan, jika kita ingin menggunakan pemain muzik dalam rangka kerja Vue, kita perlu terlebih dahulu memilih pemalam pemain muzik yang sesuai dengan kita, kemudian memasang dan mengkonfigurasinya mengikut dokumentasi pemalam, dan akhirnya panggil main balik melalui peranti komponen. Jika pemalam tidak dapat memenuhi keperluan kami, kami juga boleh menyesuaikan beberapa komponen untuk melaksanakan fungsi pemain muzik.

Atas ialah kandungan terperinci Cara memadankan lagu dengan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!