Bagaimana untuk melaksanakan pemain audio menggunakan Vue

Vue ialah rangka kerja JavaScript yang popular dengan model pembangunan berasaskan komponen yang cekap dan keupayaan pengikatan data responsif, sesuai untuk membangunkan aplikasi web interaktif yang kaya. Dalam pembangunan sebenar kami, penyesuaian dan pembangunan komponen UI ialah keperluan biasa Artikel ini akan menumpukan pada cara menggunakan Vue untuk melaksanakan pemain audio.

Pertama, kita perlu memasang Vue.js. Kami boleh memuat turun fail Vue.js di tapak web rasmi Vue, atau memasangnya menggunakan npm atau benang:

npm install vue

Selepas pemasangan selesai, kami boleh mula membina pemain audio kami.

HTML part

Dalam bahagian HTML, kita perlu mengisytiharkan tag audio <audio> dan semua komponen kawalan pemain audio terlebih dahulu. Kita dapat melihat bahawa kita menggunakan beberapa butang untuk mengawal pelbagai keadaan pemain masing-masing. Butang ini akan terikat pada komponen vue. Kita juga boleh menggunakan div untuk memaparkan senarai muzik, yang juga akan diikat oleh komponen vue. Kami juga mengikat senarai main supaya kami boleh menambah dan mengalih keluar muzik secara dinamik. <audio>和所有的音频播放器控制组件。 我们可以看到，我们使用了几个按钮来分别控制播放器的各个状态。这些按钮将被绑定到 vue 组件。我们还可以使用一个div来显示音乐列表，它也将被vue组件绑定。我们同时绑定了播放列表，这样我们就可以动态添加和删除音乐。

<div id="app">
    <div class="audio-player">
        <audio src="" id="audio" ref="audio"></audio>
        <!-- 播放按钮 -->
        <button class="button" v-on:click="playAudio"><i class="fa fa-play"></i></button>
        <!-- 暂停按钮 -->
        <button class="button" v-on:click="pauseAudio"><i class="fa fa-pause"></i></button>
        <!-- 上一个按钮 -->
        <button class="button" v-on:click="prevAudio"><i class="fa fa-chevron-left"></i></button>
        <!-- 下一个按钮 -->
        <button class="button" v-on:click="nextAudio"><i class="fa fa-chevron-right"></i></button>
        <div class="playlist">
            <div class="list-item" v-for="(audio,index) in audioList" v-bind:key="index" v-on:click="changeAudio(index)">
                {{audio.name}}
            </div>
        </div>
    </div>
</div>

Vue 组件的定义

接下来，我们需要定义Vue组件，并实现我们刚才在HTML中定义的方法:

var vm = new Vue({
    el: '#app',
    data: {
        audioList: [], // 音乐列表
        currentAudio: { // 当前音乐信息
            src: '',
            name: '',
            artist: '',
        },
        currentIndex: 0, // 当前播放音乐在列表中的索引
        playStatus: false, // 播放状态
    },
    methods: {
        // 播放音乐
        playAudio: function() {
            this.playStatus = true
            this.$refs.audio.play()
        },
        // 暂停音乐
        pauseAudio: function() {
            this.playStatus = false
            this.$refs.audio.pause()
        },
        // 播放下一首
        nextAudio: function() {
            this.currentIndex++
            if (this.currentIndex > this.audioList.length - 1) {
                this.currentIndex = 0
            }
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        },
        // 播放上一首
        prevAudio: function() {
            this.currentIndex--
            if (this.currentIndex < 0) {
                this.currentIndex = this.audioList.length - 1
            }
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        },
        // 切换音乐
        changeAudio: function(index) {
            this.currentIndex = index
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        }
    }
})

Vue组件的核心就是data和methods属性。 data属性中包含一组包含音乐信息和播放列表信息的变量，它们被随时监测和更新，以保证页面视图和数据的同步。 methods属性包含了一组方法，按需更新我们的音乐播放器。

正如我们之前所描述的一样，我们使用了一组音乐信息的数组audioList, 以及另一个对象currentAudio，它包含了当前播放音乐的完整信息。 我们还定义了currentIndex变量，来跟踪当前播放的歌曲，并使用playStatus来切换播放状态。

我们的方法包括： playAudio和pauseAudio 控制音乐的播放（ 或暂停), nextAudio和prevAudio分别切换播放列表中的下一首或上一首音乐, changeAudio来切换到选定的音乐。

最后，使用$refs

vm.audioList = [
    {
        name: 'A Chill Sound',
        artist: 'Faster san',
        src: 'music/1.a-chill-sound.mp3'
    },
    {
        name: 'Calm Breeze',
        artist: 'Suraj Bista',
        src: 'music/2.calm-breeze.mp3',
    },
    {
        name: 'Happiness',
        artist: 'Erick McNerney',
        src: 'music/3.happiness.mp3'
    }
];
vm.currentAudio = vm.audioList[vm.currentIndex];
vm.$refs.audio.src = vm.currentAudio.src;

Definisi komponen Vue

Seterusnya, kita perlu mentakrifkan komponen Vue dan melaksanakan kaedah yang baru kita takrifkan dalam HTML:

rrreee

The teras komponen Vue ialah atribut data dan methods. Atribut data mengandungi set pembolehubah yang mengandungi maklumat muzik dan maklumat senarai main Ia dipantau dan dikemas kini pada bila-bila masa untuk memastikan paparan halaman dan data disegerakkan. Atribut methods mengandungi satu set kaedah untuk mengemas kini pemain muzik kami mengikut keperluan.

Seperti yang kami terangkan sebelum ini, kami menggunakan pelbagai maklumat muzik audioList dan satu lagi objek currentAudio, yang mengandungi maklumat Lengkap tentang muzik yang sedang dimainkan . Kami juga mentakrifkan pembolehubah currentIndex untuk menjejak lagu yang sedang dimainkan dan menggunakan playStatus untuk menukar status main balik. #🎜🎜##🎜🎜#Kaedah kami termasuk: playAudio dan pauseAudio untuk mengawal main semula (atau jeda) muzik, nextAudio dan prevAudio bertukar kepada muzik seterusnya atau sebelumnya dalam senarai main masing-masing dan changeAudio bertukar kepada muzik yang dipilih. #🎜🎜##🎜🎜#Akhir sekali, gunakan kaedah $refs untuk merujuk audio tag audio yang kami nyatakan sebelum ini dalam bahagian HTML, supaya kaedah main dan jedanya boleh dipanggil. #🎜🎜##🎜🎜#ikat senarai muzik#🎜🎜##🎜🎜#Kami kini boleh mengikat pemain kami ke senarai muzik. Fail muzik yang sesuai boleh dipilih dalam talian dan ditambah pada senarai muzik. Kodnya adalah seperti berikut. #🎜🎜#rrreee#🎜🎜# Kami boleh menikmati muzik kami sekarang. Artikel ini menunjukkan cara untuk mencipta pemain muzik ringkas menggunakan Vue.js dan kami melihat cara menggunakan pengikatan data dan keupayaan panggilan kaedah untuk mencipta aplikasi dinamik. Apabila melaksanakan ciri, adalah penting untuk menyusun kod anda dengan kemas dan jelas, dengan mengambil kira keselamatan dan kemudahan penggunaan untuk fungsi hujung ke hujung. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemain audio menggunakan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!