用Vue实现音乐播放器

小蓝 • 2024-12-13 17:34 • 编程

一、项目简介

Vue音乐播放器是一个基于Vue.js和Webpack构建的开源播放器项目。该项目实现了音乐歌曲的在线播放、列表循环、歌词同步显示等多种功能。该项目的启动和运行十分简单，只需几个简单的命令即可在本地搭建一个完整的音乐播放器系统。此外，该项目还可以方便地扩展和定制，可以满足不同用户的个性化需求。

二、安装和配置

1、安装依赖

npm install

2、配置环境变量

在.env文件中修改以下配置：

VUE_APP_BASE_API=/api # 接口地址 
VUE_APP_MUSIC_API=/music # 音乐资源地址

三、实现功能

1、音乐播放

通过Vue.js的生命周期函数和第三方插件完成音乐播放功能。在网页加载完成后，使用Vue-resource插件异步获取歌曲资源并进行音乐播放。播放页面的组件化设计轻松实现了歌曲播放页的编写和拓展。该项目还实现了歌曲的暂停、切换和拖拽等多种操作，提高了用户体验度。


// 在Vue模板中使用audio标签实现音乐播放
<audio ref="audioControl" @timeupdate="handleTimeupdate">
    <source :src="currentSong.url">
</audio>

// Vue.js的生命周期函数使用Vue-resource插件异步获取歌曲资源
created() {
    this.$http.get(this.$api.getUrl('/song/url'), {
        params: { id: this.currentSong.id }
    }).then(res => {
        if (res.data['data'][0].url !== null) {
            this.currentSong.url = res.data['data'][0].url
            this.$store.commit('setCurrentSong', this.currentSong)
            this.$refs.audioControl.play()
        }
    })
},

2、歌曲列表

通过使用Vue-router插件组件化的设计，可以轻松实现歌曲列表的拓展和查看。每次加载列表时，都会进行异步获取数据的请求。通过包括歌曲名称、歌手、专辑、时长等多种显示方式来提高用户体验。各种操作按钮如添加、删除、播放等操作的实现，增强了系统的可用性和灵活性。


// 获取歌曲列表数据
this.$http.get(this.$api.getUrl('/playlist/detail'), {
    params: { id: this.playlistId }
}).then(res => {
    this.songs = this.formatSongs(res.data.playlist.tracks)
    ...
})

// 列表展示歌曲信息
<tr v-for="(item, index) in songs">
    <td><span class="item-number">{{ index + 1 }}</span></td>
    <td><span class="item-name" @click="handlePlay(item)">{{ item.name }}</span></td>
    <td><span class="item-singer">{{ item.singer }}</span></td>
    <td><span class="item-album">{{ item.album }}</span></td>
    <td><span class="item-time">{{ item.time }}</span></td>
    <td><span class="item-operate">
        <i class="iconfont icon-shanchu" @click="handleDelete(item)"></i>
    </span></td>
</tr>

3、音乐搜索

使用Vue组件化的思想，通过异步Ajax请求并对数据进行处理，实现音乐搜索的高效和准确。通过对歌曲名、歌手等信息的搜索，方便愉快的获取自己所喜欢的音乐。


// 发送异步请求获取搜索结果
this.$http.get(this.$api.getUrl('/search/suggest'), {
    params: { keywords: this.query }
}).then(res => {
    this.suggestList = res.data.result.allMatch
    ...
})

// 列表展示搜索结果
<li v-for="item in suggestList" @click="handleSelect(item.keyword)">{{ item.keyword }}</li>

4、歌曲歌词

该项目使用Vue.js提供的指令创造了字面意义上的双向绑定，根据当前歌曲播放时间显示相应的歌词。歌词样式优美而稳定，保证了用户使用的体验。


// 获取歌曲歌词
this.$http.get(this.$api.getUrl('/lyric'), {
    params: { id: this.currentSong.id }
}).then(res => {
    if (res.data.lrc) {
        this.oriLyric = res.data.lrc.lyric
        this.lyricObj = this.parseLyric(this.oriLyric)
        ...
    }
})

// 段落输出歌词内容，判断当前播放时间和歌曲歌词时间是否相等，达到同步效果
<p :class="{ 'lyric-current': isActive(index) }" v-for="(line, index) in lyricList">
    {{ line.text }}
</p>

四、总结

该音乐播放器项目从多个方面实现了音乐播放的需求，通过Vue组件化思想的运用优化了用户体验，使整个项目具有更强的可维护性和拓展性。同时，该项目也涵盖了项目开发中重要步骤的实现（如网络请求、数据解析、组件化开发），适合初学者进行学习和实践。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/252224.html