Vue 框架中 UI 组件定制与音频播放器开发教程

你听过Vue没？好多人喜欢用它，因为好多功能还特好用，学着也不费劲儿。想搭网页应用的话，感觉瞬间就完成了。特别适合做那些互动性强的东西，举个例子，想要弄个在线音乐播放器，用上Vue，轻松解决，真是赞爆了！

1.安装Vue.js

下个Vue，网上下载或者用npm或yarn都行。个人觉得npm更好使哈。搞定了就赶紧开创你的播客！

npm install vue

2.HTML部分的准备

首先，我们得给HTML代码加点料，弄个音轨标签和耳机遥控器模块进去。这很容易对？按个按钮就能操控音乐，还能跟Vue组件玩互动！接着，就用Vue组件来展示歌单，赏心悦目？当然别忘了再搞个播放列表，这样你就可以随意增删自己喜欢的歌曲！

3.Vue组件的定义

让我们用Vue组件搞定这事儿！把原来HTML里的那些都搬过来就行了。这个Vue组件主要依赖data和methods帮我们完成任务。data就是用来存放音乐信息的，Methods方便我们对播放器进行操作。这么一搞，网页上展示的内容就能随着数据变化而实时更新！

4.数据绑定和方法调用

    

        
        
        
        
        
        
        
        
        
        

            

                {{audio.name}}
            
        
    

这儿有你喜欢的歌，都在audioList里头。用currentAudio听歌，还能让你记得更清楚。要调速？没问题，currentIndex和playStatus会帮你搞定。一点playAudio就可以欣赏曲子了。上厕所或溜号咋办？按pauseAudio就行。要换首歌？那就试试changeAudio，保证你满意！

5.绑定音乐列表

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()
        }
    }
})

哥们儿，咱们设备已经连好了，喜欢的歌大家都能用哈~想听什么歌直接搜就行，秒进你的歌单！其它地儿哪有这儿那么方便？来，一起感受下这美妙的旋律！

6.代码的组织和安全

设计这个软件的时候，我们就要让程序猿们一看就明白，秒懂怎么用。过程得简单明了，大家都知道要干！当然，保护客户隐私也是不能忘记的大事儿！

7.测试和优化

想听歌吗？先看看你的音乐播放器能不能用。按键得使劲点，快点别卡壳儿！

哇！我们用Vue不只能做出炫酷的音乐播放器，还能搭建好玩儿的网站！希望大家在学Vue的路上乐在其中，收获满满

突然想问问您，要是让您来设计音乐播放器，还能有啥新鲜有趣的功能？

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;