Bagaimana untuk membuat pemain muzik dalam rangka kerja vue

Rangka kerja Vue ialah rangka kerja JavaScript yang digunakan untuk membina antara muka pengguna. Membangunkan pemain muzik dalam Vue ialah tugas yang sangat mencabar kerana anda perlu menangani pelbagai aspek seperti data audio, kawalan UI dan pengalaman pengguna. Dalam artikel ini, kami akan memperkenalkan cara mencipta pemain muzik mudah menggunakan rangka kerja Vue.

1. Persediaan

Sebelum anda bermula, anda perlu memastikan anda menyediakan semua fail dan perpustakaan yang diperlukan. Mula-mula, anda perlu memuat turun perpustakaan Vue.js daripada tapak web rasmi Vue dan kemudian menambahkannya dalam projek anda.

Selain itu, anda perlu menggunakan perpustakaan JavaScript untuk memainkan audio. Kami akan menggunakan API Penanda Audio, kaedah JavaScript asli yang membantu kami memainkan audio dalam penyemak imbas. Walau bagaimanapun, untuk menjadikan rangka kerja lebih mudah digunakan, kami juga akan menggunakan komponen Vue yang dipanggil teg vue-audio.

2. Buat Apl Vue

Seterusnya, mari buat apl Vue. Untuk ini kami akan menggunakan Vue CLI. Masukkan arahan berikut pada baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

Kemudian, cipta dan lancarkan aplikasi Vue menggunakan arahan berikut:

vue create music-player
cd music-player
npm run serve

Ini akan dilancarkan secara tempatan pada http:// localhost:8080 Bangunkan pelayan dan paparkan halaman permulaan Vue lalai.

3. Tambah komponen vue-audio

Sekarang, kami akan menambah pemain audio menggunakan komponen Vue. Memasang komponen Vue-audio boleh memudahkan tugas ini. Masukkan arahan berikut pada baris arahan untuk memasang komponen:

npm install vue-audio --save

Setelah pemasangan selesai, buat fail baharu bernama AudioPlayer.vue dalam direktori src. Dalam fail ini, tambahkan kod berikut:

<template>
  <div>
    <audio :src="source" ref="player"></audio>
    <button @click="play">
      {{ isPlaying ? 'Pause' : 'Play' }}
    </button>
  </div>
</template>

<script>
  import Audio from 'vue-audio'
  
  export default {
    components: { Audio },
    props: {
      source: String
    },
    data() {
      return {
        isPlaying: false
      }
    },
    methods: {
      play() {
        const player = this.$refs.player;
        if (this.isPlaying) {
          player.pause();
        } else {
          player.play();
        }
        this.isPlaying = !this.isPlaying;
      }
    }
  }
</script>

Komponen ini ialah pemain audio ringkas yang terdiri daripada teg audio HTML, butang dan kaedah. Teks pada butang akan bertukar berdasarkan keadaan main balik. Dalam data isPlaying, kami akan merakam sama ada audio sedang dimainkan. Jika elemen audio sedang dimainkan, kami akan memaparkan teks jeda dalam komponen dan jeda elemen audio apabila butang diklik. Jika elemen audio dijeda, teks main dipaparkan dan elemen dimainkan pada klik butang.

4. Gunakan vue-audio untuk memainkan audio

Kini, kita boleh menggunakan komponen AudioPlayer dalam apl Vue untuk memainkan audio. Mula-mula, tambahkan fail audio anda pada direktori src/assets. Kemudian, tambahkan kod berikut dalam App.vue:

<template>
  <div>
    <AudioPlayer :source="audioSrc" />
  </div>
</template>

<script>
  import AudioPlayer from './components/AudioPlayer.vue'
  
  export default {
    components: { AudioPlayer },
    data() {
      return {
        audioSrc: require('@/assets/audio_file.mp3')
      }
    }
  }
</script>

Dalam komponen ini, kami menggunakan komponen AudioPlayer. Fail audio kami kini dimuatkan secara dinamik dan akan dihantar sebagai sumber kepada komponen AudioPlayer untuk dimainkan.

5. UI Tersuai

Akhir sekali, kami perlu membuat beberapa penyesuaian UI pada pemain audio. Kami akan menulis beberapa gaya menggunakan CSS, sila tambahkan CSS berikut dalam App.vue:

<style>
  button {
    background-color: #2e79bd;
    border: none;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #3a8ff7;
  }
  
  audio {
    width: 100%;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  }
</style>

Kini pemain muzik kami telah lengkap. Dengan menggunakan rangka kerja Vue dan komponen vue-audio, kami berjaya mencipta pemain muzik dengan UI asas dan kawalan main balik.

Kesimpulan

Dalam artikel ini, kami memperkenalkan cara mencipta pemain muzik mudah menggunakan rangka kerja Vue dan komponen vue-audio. Dengan menggunakan komponen Vue, kami boleh menjadikan pemain audio lebih mudah untuk digunakan dan diselenggara, serta memberikannya UI yang boleh disesuaikan. Jika anda perlu mencipta pemain muzik yang kompleks, fungsi itu boleh dilanjutkan dengan menyepadukan perpustakaan JavaScript lain.

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