【前端】利用Vue.js制作一个简易的音乐播放器

【前端】利用Vue.js制作一个简易的音乐播放器

简介

在这篇博客中，我将使用 Vue.js 实现一个简易的音乐播放器。这个小项目虽然功能简单，但包含了 Vue 的基本指令绑定、事件处理、条件渲染等多个核心知识点。

项目目标

音乐播放器具备以下功能：

• 播放音乐
• 点击歌曲名称
• 自动播放下一首
• 手动点击下一首

项目结构简述

使用的十原生HTML+Vue.js构建，无需构建工具，结构简单：

project/
│
├── index.html         // 主页面
├── vue.js             // 引入 Vue（开发版）
└── static/
    ├── Joel Adams - Please Dont Go.mp3
    ├── MKJ - Time.mp3
    └── Russ - Psycho (Pt. 2).mp3

HTML结构部分

<div id="app">
    <audio :src="currentSrc" controls autoplay @ended="handleended"></audio>
    <ul>
        <li 
            :class="{active: index === currentIndex}" 
            v-for="(item, index) in musicData" 
            :key="item.id" 
            @click="handleClick(item.songSrc, index)"
        >
            <h2>{{item.id}}: {{item.name}}</h2>
            <p>{{item.author}}</p>
        </li>
    </ul>
    <button @click="handleNext">下一首</button>
</div>

代码解析

<audio :src="currentSrc" controls autoplay @ended="handleended"></audio>

• :src=“currentSrc”：绑定当前播放的音乐文件路径。
• controls：显示播放控件（播放、暂停、音量等）。
• autoplay：页面加载时自动播放。
• @ended=“handleended”：当前歌曲播放结束时自动触发 handleended 方法。

<ul>
    <li :class="{active:index===currentIndex}" v-for="(item,index) in musicData" :key="item.id" @click="handleClick(item.songSrc,index)">
        <h2>{{item.id}}:{{item.name}}</h2>
        <p>{{item.author}}</p>
    </li>
</ul>

• 使用 v-for 循环遍历 musicData 列表来渲染歌曲列表。
• :class=“{active: index===currentIndex}”：当前播放的歌曲加上 active 样式。
• @click=“handleClick(item.songSrc,index)”：点击某一首歌时触发播放函数。

<button @click='handleNext'>下一首</button>

• 点击这个按钮切换到下一首歌。

简单的样式美化

ul li.active {
    background-color: #d2e2f3;
}

给播放的歌曲加上背景色，美化网页。

Vue逻辑部分

const musicData = [
    {
        id: 1,
        name: 'Joel Adams - Please Dont Go',
        author: 'Joel Adams',
        songSrc: './static/Joel Adams - Please Dont Go.mp3'
    },
    {
        id: 2,
        name: 'MKJ - Time',
        author: 'MKJ',
        songSrc: './static/MKJ - Time.mp3'
    },
    {
        id: 3,
        name: 'Russ - Psycho (Pt. 2)',
        author: 'Russ',
        songSrc: './static/Russ - Psycho (Pt. 2).mp3'
    }
];

new Vue({
    el: '#app',
    data: {
        musicData,
        currentSrc: musicData[0].songSrc,
        currentIndex: 0
    },
    methods: {
        handleClick(src, index) {
            this.currentSrc = src;
            this.currentIndex = index;
        },
        handleended() {
            this.handleNext();
        },
        handleNext() {
            this.currentIndex++;
            if (this.currentIndex === this.musicData.length) {
                this.currentIndex = 0;
            }
            this.currentSrc = this.musicData[this.currentIndex].songSrc;
        }
    }
});

代码解析

const musicData = [
    {id:1, name:'Joel Adams - Please Dont Go', author:'Joel Adams', songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
    {id:2, name:'MKJ - Time', author:'MKJ', songSrc:'./static/MKJ - Time.mp3'},
    {id:3, name:'Russ - Psycho (Pt. 2)', author:'Russ', songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
];

音乐播放列表，包含歌曲的id，名称，作者，音频文件路径。

new Vue({
    el:"#app",
    data:{
        musicData,
        currentSrc:'./static/Joel Adams - Please Dont Go.mp3',
        currentIndex:0,
    },

Vue 实例挂载到 #app 元素上，定义了：

• musicData: 歌曲数据
• currentSrc: 当前播放歌曲的路径
• currentIndex: 当前播放歌曲的索引

methods:{
    handleClick(src,index){
        this.currentSrc = src;
        this.currentIndex = index;
    },

用户点击歌曲列表时，切换 currentSrc 和 currentIndex，更新播放。

    handleended(){
        this.handleNext();
    },

歌曲播放完时调用 handleNext()，自动播放下一首。

    handleNext(){
        this.currentIndex++;
        if(this.currentIndex === this.musicData.length){
            this.currentIndex = 0;
        }
        this.currentSrc = this.musicData[this.currentIndex].songSrc;
    }

播放下一首歌曲，如果到达最后一首if判断循环返回第一首。

展示结果

• 哪一首歌播放就显示高亮背景
• 播放完会自动播放下一首
• 下一首按钮可进行手动播放