网页音乐播放器总结[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。
总结一下Vue实战的网页音乐播放器 首先是设计出主体的整个框架 分为四个部分 最左边的歌曲列表，中间的唱片，最右边的热门评论显示以及下方的播放条
然后开始准备进行功能的实现 首先是需要导入Vue的依赖以及axios的js网络依赖库
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>1.音乐搜索功能 进行音乐搜索，用户需要进行输入关键字 定义一个query变量来进行关键字的接收以及一个数组用于存放数据
data: {
// 查询关键字
query: "",
// 歌曲数组
musicList: [],
}编写查询歌曲方法：
// 歌曲搜索
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;
console.log(response.data.result.songs);
},
function(err) {
})
},使用get方式来获取，记得在编写完整的数据之前 先打印出返回的数据response，在里面查找一下搜索到的路径 比如我们需要的歌曲信息，就在response.data.result.songs这个地方 因此进行一个提取保存，然后传递给网页
<li v-for="item in musicList">使用v-for进行一个循环，进行展示 2.歌曲播放 我们的歌曲利用的是网络上的资源，因此每一个歌曲都有一个歌曲id 每个id都对应着一个播放地址播放地址 因此，使用axios进行id+接口组合的网络请求，将返回的数据进行分析 歌曲的url在response.data.data[0].url里 注意在这里要设置一个that = this 因为this是会随着每次搜索点击而变动的，使用that来保存现在所需要的this
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
function (response) {
// console.log(response);
// console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
},
function (err) {
})在前端网页上添加相应的触发方法 对应的歌曲名应该设计成动态的{ {item.name}}
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{
{
item.name}}</b>歌曲的url以及获取，因此在网页上的audio里面进行绑定
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>使用:src=”musicUrl”进行绑定歌曲源 3.歌曲专辑图片显示 每个歌曲都有一个专辑图片，图片的URL就在返回的数值里面
// 歌曲封面
musicCover: "",
//歌曲详情搜索
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
.then(function (response) {
//console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},function (err) {
})注释掉的console.log都是为了测试是否返回正确的值 确保返回正确后再设计函数进行处理 获取到图片的URL后在前端页面进行绑定
//使用v-bind进行绑定
<img :src="musicCover" class="cover autoRotate" />4.热门评论获取 同理，热门评论是在response.data.hotComments 通过接口加音乐id来获取所需要的数据组
//歌曲评论的获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
.then((function (response) {
console.log(response.data.hotComments);
that.hotConments = response.data.hotComments;
}))热门评论我们用//歌曲评论 hotConments:[],
数组来进行保存
然后在前端使用循环语句进行返回
每个热门语句都对应着评论者和头像
因此同样进行筛选返回
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in hotConments">
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{
{
item.nickname }}</dd>
<dd class="detail">
{
{
item.content }}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>使用item.nickname来实现动态名称和头像显示 5.仿真胶片播放动画 我们希望当播放的时候，能有一个胶片旋转的动画进行播放 来增加更多的趣味性和真实性 首先就需要定义播放的状态，来判断是否在播放 逻辑很简单
//动画播放状态
isPlaying:false,
play:function () {
// console.log("play");
this.isPlaying = true;
},
pause:function () {
// console.log("pause");
this.isPlaying = false;
},定义一个变量，用于记录播放状态，初始设计为false 在前端的audio播放按钮进行绑定 每次点击都进行一个状态的切换（上面的代码里面已经写出来了） 然后在黑胶唱片那个div进行一个v-bind绑定
<div class="player_con" :class="{playing:isPlaying}">当isplaying为真的时候，class名变换 相应的css样式生效，形成旋转的效果
/* 旋转的动画 */
@keyframes Rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
/* 旋转的类名 */
.autoRotate {
animation-name: Rotate;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc, .player_con.playing .cover {
animation-play-state: running;
}6.mv的播放 除了普通的音乐播放外，还可以进行mv的播放 每个歌曲都对应着一个mvid，每个mvid又对应着相应的mvURL 我们通过解析出mv的URL来实现视频播放 但并不是每一个歌曲都具有对应的mv 因此首先应该进行一个筛选 在前端歌曲列表中
<ul class="song_list">
<li v-for="item in musicList">
<!-- 这个a标签表示的是左侧列表里面的播放按钮 -->
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{
{
item.name}}</b>
<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li>
</ul>使用v-if来进行判断，当具有mvid时，显示mv播放按钮，否则不显示 接下来编写播放mv功能 核心思想就是提取出mv的URL，然后传递到页面上进行一个绑定
//播放MV
playMV:function (mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
.then(function (response) {
that.isShow = true;
that.mvUrl = response.data.data.url;
},function (err) {
})
},
<video :src="mvUrl" controls="controls"></video>当然mv能打开也要能关闭 我们设计一个蒙版mask，在点击蒙版的时候进行隐藏 因此要设计一个状态变量来进行记录
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
//隐藏MV
hide:function () {
this.isShow = false;
}至此，音乐播放器大功告成！
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/149949.html原文链接：https://javaforall.cn
腾讯云开发者
