用Vue制作简易音乐播放器（超详细）

先放个效果图吧

首先先把主体结构搭好，样式调好，然后再来写播放器的功能。

根据播放器的形状，将其分为头部（搜索栏），中间（歌曲列表，碟片，热评），尾部（播放器栏），html结构如下

<div class="wrap" id="app"><!-- 整体播放器部分 --><div class="play_wrap"><!-- 头部 --><div class="search_bar"><a href="javascript:location.reload();" class="refresh"><p class="player_title">音乐播放器</p></a><input type="text"><img src="data:images/zoom.png" class="search" @click="searchMusic" alt=""></div>

可以看到头部中是定义了一个a标签，用来点击后刷新页面，然后是标题，最后是一个文本框加搜索光标

<!-- 中间 -->
<div class="center_con"><!-- 中间的左边 --><div class="song_wrapper"><!-- 歌曲列表 --><ul class="song_list"><li><a href="javascript:;"></a><b>你好</b></li><li><a href="javascript:;"></a><b>你好</b><span><i></i></span></li></ul><img src="data:images/line.png" class="left_line" alt="line"></div><!-- 中间的中间 --><div class="player_con"><img src="data:images/player_bar.png" class="play_bar" alt="bar"><img src="data:images/disc.png" class="disc" alt="disc"><img src="data:images/三笠.png" class="cover" alt="cover"></div><!-- 中间的右边 --><div class="comment_wrapper"><h5 class="title">热门留言</h5><!-- 热评列表 --><div class="comment_list"><dl><dt><img src="data:images/person.png" alt="person"></dt><dd class="name">jack</dd><dd class="detail">hah</dd></dl></div><img src="data:images/line.png" class="right_line" alt=""></div>
</div>

可以看到中间是分为左中右三部分，左边为歌曲列表，先随便写了两个li当模板，方便书写css样式，中间是三张图，右边是热评列表

<!-- 尾部 -->
<div class="audio_con"><!-- 音乐播放器 --><audio src="" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" style="display: none;"><!-- mv播放器 --><video src="" controls></video><!-- 遮罩层 --><div class="mask"></div>
</div>

而尾部则是由音乐播放器和mv播放器组成，mv播放器默认状态是不显示的，添加一个遮罩层是为了方便关掉mv。

由于css文件过多这里就不写出来了，可以去gitee自取，地址在最后面。

此时的结果应该是这样的

准备工作就绪，开始书写播放器的功能。总共分为六部分，歌曲搜索，歌曲播放，歌曲封面，歌曲评论，播放动画，播放mv。

先看第一部分歌曲搜索，想要实现的功能是在搜索栏输入歌曲名字或者歌手名字按下回车后，歌曲列表里能出来相应的歌曲。

想要达到该功能，首先是要通过v-on给搜索栏绑定一个回车事件以及搜索光标绑定一个点击事件，然后就需要使用v-model来双向传递数据，同时通过axios来调用接口查询数据，最后就是用v-for来渲染数据。js程序如下

var app = new Vue({el: "#app",data: {query: "",},methods: {searchMusic: function () {axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function (response) {console.log(response);}, function (err) {})}}
})

传入一个空字符串query用来表示搜索的内容，然后定义一个searchMusic函数来搜索歌曲，其中调用axios接口，先打印一下看看response是什么，以及想要的歌曲位置在哪里。

在打印之前先在html中通过v-on给搜索栏绑定回车事件，通过v-model双向传递数据，程序如下

<input type="text" @keyup.enter="searchMusic" v-model="query">
<img src="data:images/zoom.png" @click="searchMusic" class="search" alt="">

打印结果如下

可以看到输入歌手sia按下回车后，打印出来的歌曲位于data中的result中的songs里面，因此重新书写该函数

searchMusic: function () {var that = this;axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function (response) {// console.log(response);that.musicList = response.data.result.songs;}, function (err) {})
}

并且给data中添加一个空数组musicList 用来存放歌曲，最后就是渲染数据，在html文件中找到歌曲列表那一段，添加v-for

<li v-for="item in musicList"><a href="javascript:;"></a><b>{{ item.name }}</b><span><i></i></span>
</li>

第一部分歌曲搜索已做完，第二部分是歌曲播放。想要实现的功能是点击该歌曲后能够进行播放。

想要完成该功能首先是点击列表中的歌（v-on），然后调用接口获取歌曲地址，最后是歌曲地址设置，属性设置是通过v-bind来设置，js程序如下

playMusic: function (musicId) {axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function (response) {console.log(response);}, function (err) {})
}

首先定义一个playMusic函数，为了具体到播放哪首歌，传入一个形参musicId，然后调用axios接口，同样来打印一下response看看歌曲地址放在哪。

打印之前先给歌曲列表中的a标签绑定一个点击事件

<a href="javascript:;" @click="playMusic(item.id)"></a>

打印结果如下

可以看到歌曲地址即url这个属性是存放在data中的data中的0数组中的url中，所以该函数重新书写

playMusic: function (musicId) {var that = this;axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(function (response) {// console.log(response);that.musicUrl = response.data.data[0].url;}, function (err) {})
}

并且给data中添加一个空字符串musicUrl 用来存放歌曲地址，最后就是通过v-bind把这个歌曲地址赋给播放器了

<audio :src="musicUrl" controls autoplay loop class="myaudio"></audio>

第二部分歌曲播放也已经完成，第三部分是歌曲封面。想要实现的功能是让播放器在播放音乐的同时，歌曲封面会自动变化成该歌曲的专辑封面。

要完成该功能首先是要调用接口获取歌曲封面的信息，然后通过v-bind赋给封面所在的标签，和歌曲播放部分类似，js程序如下

axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function (response) {console.log(response);
}, function (err) {})

由于是在播放歌曲的同时切换歌曲封面，所以该程序还是在playMusic函数中，打印的结果如下

可以看到封面地址即picUrl是存放在data中的songs中的0数组中的al中的picUrl中，所以重新书写程序

axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function (response) {// console.log(response);that.coverUrl = response.data.songs[0].al.picUrl;
}, function (err) {})

同时在data中传入一个空字符串coverUrl用来存放封面地址，然后通过v-bind给封面所在标签赋值

<img :src="coverUrl" class="cover" alt="cover">

第三部分歌曲封面也已经获得，第四部分是热门评论。想要实现的功能是在播放歌曲的同时评论列表也出现该首歌曲下面的热评。

想要完成该功能首先是调用接口获取评论信息，然后通过v-for渲染数据，和歌曲搜索部分类似，js程序如下

axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function (response) {console.log(response);
}, function (err) {})

由于是在播放歌曲的同时显示评论，所以该段程序还是在playMusic函数中，打印结果如下

可以看到评论信息存放在data中的hotComments中，因此程序如下

axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function (response) {// console.log(response);that.comments = response.data.hotComments;
}, function (err) {})

然后通过v-for数组渲染数据，找到评论所在的标签

<dl v-for="item in comments"><dt><img src="data:images/person.png" alt="person" :src="item.user.avatarUrl"></dt><dd class="name">{{ item.user.nickname }}</dd><dd class="detail">{{ item.content }}</dd>
</dl>

由于评论者的头像信息是个地址，所以这里通过v-bind来赋值，然后评论者的名字和其评论都可以在上面打印的信息中找到。

第四部分歌曲评论也已经完成，第五部分是播放动画。想要实现的功能是当播放歌曲时，中间的碟片会一直旋转，停止播放时碟片也随之停止。

要想完成该功能其实就是一个对class="player_con"这个类增删类名的过程，播放时是类名player_con A，暂停时是类名player_con。首先是要绑定两个事件，播放play和暂停pause（这两个事件audio标签是自带的），所以只需要定义一个状态就行了，最后就是通过v-bind添加类名。js程序如下

play: function () {this.isPlaying = true;
},
pause: function () {this.isPlaying = false;
}

同时在data中添加一个isPlaying: false（平时即未播放音乐时布尔值是false）。audio标签如下

<audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop class="myaudio"></audio>

增删类名的程序如下

<div class="player_con" :class="{playing:isPlaying}">

类名playing是否增加取决于isPlaying的布尔值，当isPlaying为true时，增加playing类，同时配合css中的程序完成播放动画的效果；当isPlaying为false时，就相当于没有任何变化。

第五部分播放动画也已经完成，第六部分是播放mv。想要实现的功能是mv播放按钮的显示（因为不是所有歌曲都有mv），然后点击播放按钮后，mv在一个遮罩层上播放，点击遮罩层mv又会关闭。

想要实现该功能，首先是要通过v-if和mvid来显示播放按钮，然后调用接口获得mv地址，之后是遮罩层的显示和关闭，最后就是通过v-bind把mv地址赋给video。js程序如下

playMv: function (mvId) {axios.get("https://autumnfish.cn/mv/url?id=" + mvId).then(function (response) {console.log(response);}, function (err) {})
}

mvID在第三步获取歌曲封面的接口中可以找到，所以在HTML中直接调用就行，找到歌曲列表中存放播放mv按钮的标签，程序如下

<span><i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i></span>

当mvid不为0即该歌曲有mv时，该播放按钮就显示，同时添加点击事件，传入mvid参数，然后开始打印信息

可以看到mv地址存放在data中的data中的url中，因此该函数重新书写为

playMv: function (mvId) {var that = this;axios.get("https://autumnfish.cn/mv/url?id=" + mvId).then(function (response) {// console.log(response);that.mvUrl = response.data.data.url;that.isShowing = true;}, function (err) {})
}

同时在data中定义一个isShowing: false，即平时不播放mv。还定义一个空字符串mvUrl，将其用v-bind赋给video标签

<video :src="mvUrl" controls></video>

然后就是书写遮罩层的函数

<div class="mask" @click="hide"></div>

hide: function () {this.isShowing = false;this.mvUrl = "";
}

由于点击遮罩层后会停止播放mv，所以这里isShowing为false，而且将mvUrl设为空，就不会出现点击遮罩层退出去后mv还播放的情况。同时还为了解决在播放音乐时，点击播放mv后外面的音乐还在播放的情况，这里选择用ref和$refs来操纵dom元素，在audio标签中添加一个ref

<audio :src="musicUrl" @play="play" @pause="pause" ref="audios" controls autoplay loopclass="myaudio"></audio>

然后在playMv函数中添加一行程序

playMv: function (mvId) {var that = this;axios.get("https://autumnfish.cn/mv/url?id=" + mvId).then(function (response) {// console.log(response);that.mvUrl = response.data.data.url;that.isShowing = true;that.$refs.audios.pause();}, function (err) {})
},

由于methdos中定义的方法内部，可以通过this关键字来直接调用其他的方法，所以这里可以直接调用pause函数从而达到我们的目的。

至此所有功能都已设置完，文件可以去gitee自取

地址：https://gitee.com/azsx582/music-player-.git

用Vue制作简易音乐播放器（超详细）相关推荐

JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...
C++ 制作简易音乐播放器
内容利用c++以及一些函数库制作一个简单的音乐播放器. 成果: 实现了:打开一个音频文件,播放音频,中途暂停或继续,停止换歌,滑动控制音量大小. 视频教程本人也是根据视频教程所学,内容相同.可点击 ...
MFC制作简易音乐播放器
// MFC音乐播放器Dlg.cpp : implementation file // #include "stdafx.h" #include "MFC音乐播放器.h& ...
html实现简易音乐播放器
目标: 使用vue.js导包的形式做一个简单的音乐播放器,新手也很容易看懂. 内容: 1. 使用了flex实现响应式布局: 2. 使用min-width防止字体被压缩: 3. 使用computed计算 ...
单片机音乐播放器课程设计C语言,单片机课程设计简易音乐播放器
单片机课程设计简易音乐播放器论文题目:简易音乐播放器所属系部:电子工程系指导教师: 学生姓名: 学号: 专业: 电子信息工程技术题目: 简易音乐播放器任务与要求:本设计以 MCS-51 系列 ...
vue+express实现音乐播放器
vue+express实现音乐播放器效果图因为html中的audio的样式不能更改,所以我们自己制作UI,做成自己想要的样子,这样要实现滑动条跟audio的双向绑定,滑动条使用了vant的组件sl ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...

用Vue制作简易音乐播放器（超详细）

用Vue制作简易音乐播放器（超详细）相关推荐

最新文章

热门文章