一.前言
vue的综合应用，教你开发一个音乐播放器，能听歌，能看热门留言，能看视频，开发有以下功能：
- 歌曲搜索
- 歌曲播放
- 歌曲封面
- 歌曲评论
- 播放动画
- mv播放
二. 效果图如下
三.歌曲搜索
- 按下回车（v-on 。enter）
- 查询数据（axios接口 v-model）
- 渲染数据（v-for 数组 that）
歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
注意：
服务器返回的数据比较复杂时，注意层级结构
四.歌曲播放
- 点击播放（v-on，自定义参数）
- 歌曲地址获取（接口，歌曲id）
- 歌曲地址设置（v-bind）
歌曲url接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
注意：
- 歌曲id依赖歌曲搜索的结果，对于不用的数据也要关注
歌曲封面
- 点击播放 （增加逻辑）
- 歌曲封面获取 （接口 歌曲id）
- 歌曲封面设置 （v-bind）
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
注意：
- 在vue中通过v-bind操纵属性
- 本地无法获取的数据，基本会有对应的接口
歌曲评论
- 点击播放 （增加逻辑）
- 歌曲评论获取（接口 歌曲id）
- 歌曲评论渲染 （v-for）
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
注意：
- 在vue中通过v-for 生成列表
播放动画
- 监听音乐播放（v- on play）
- 监听音乐暂停（v-on pause）
- 操纵类名 （v-bind）
注意：
- audio标签的paly事件会在音乐播放时触发
- audio标签的pause事件会在音乐暂停时触发
- 通过对象的方式设置类名，类名生效是否取决于后面值的真假
mv播放
- mv图标显示 （v-if）
- mv地址获取 （接口mvid）
- 遮罩层 （v-show v-on）
- mv地址设置 （v-bind）
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
注意
- 不同接口需要的数据不一样，阅读文档要仔细
- 页面结构复杂，要多审查
- 数据都要在data中定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 样式 -->
<style>
/* * {
margin: 0;
padding: 0;
} */
.player_loge {
position: absolute;
top: 20px;
left: 20px;
z-index: 3;
width: 80px;
height: 21px;
font-size: 100%;
}
.player_loge a {
text-decoration: none;
color: rgb(135, 146, 160);
cursor: pointer;
}
</style>
</head>
<body style="background-color: rgb(96, 128, 160);">
<div class="wrap">
<!-- 播放器主题区域 -->
<h1 class="player_loge"><a href="#">小涵音乐</a></h1>
<div class="play_wrap" id="player">
<div class="search_bar">
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic" />
</div>
<!-- 搜索歌曲列表 -->
<div class="center_con">
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="item in musicList">
<!-- 点击放歌 -->
<a href="javascript:;" @click='playMusic(item.id)'></a>
<input type="button" value="播放" @click='playMusic(item.id)'>
<b>{{item.name}}</b>
<input type="button" value="mv" v-if="item.mvid!=0" @click="playMv(item.mvid)">
<span v-if="item.mvid!=0" @click="playMv(item.mvid)">
<i></i>
</span>
</li>
</ul>
</div>
<!-- 歌曲封面 -->
<div class="player_ con">
<img src="" alt="" class="play_bar">
<img src="" alt="" class="disc autoRotate">
<img :src="musicCover" alt="" class="cover autoRotate">
</div>
</div>
<!-- 歌曲评论 -->
<div class="comment_wrapper">
<h5 class="title">热门留言</h5>
<div class="comment_list">
<dl v-for="item in hotComments">
<!-- 评论头像 -->
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{{item.nickname}}</dd>
<dd class="detail">{{item.content}}</dd>
</dl>
</div>
</div>
<!-- 播放区域 -->
<div class="audio_con">
<audio ref='audio' @play='play' @pause='pause' :src="musicUrl" controls autoplay loop
class="myaudio"></audio>
</div>
<!-- mv播放 -->
<div class="video_con" v-show='isShow' style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
// 设置axios的基地址
axios.defaults.baseURL = 'https://autumnfish.cn';
// axios.defaults.baseURL = 'http://localhost:3000';
// 实例化vue
var app = new Vue({
el: "#player",
data: {
// 搜索关键字
query: '',
// 歌曲列表
musicList: [],
// 歌曲地址
musicUrl: '',
// 歌曲封面
musicCover: '',
// 歌曲评论
hotComments: [],
// 动画播放
isplay: false,
isShow: false,
// mv地址
mvUrl: ""
},
// 方法
methods: {
// 歌曲搜索
searchMusic: function () {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(function (response) {
// console.log(response);
// console.log(response.data.result.songs)
that.musicList = response.data.result.songs;
})
},
// 歌曲播放
playMusic: function (musicId) {
var that = this;
// console.log(musicId);
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) { })
//歌曲详情获取
axios.get('https://autumnfish.cn/song/detail?ids=' + musicId)
.then(function (response) {
// console.log(response);
// console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
}, function (err) { })
//歌曲评论
axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId)
.then(function (response) {
// console.log(response);
// console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
}, function (err) { })
},
play: function () {
// console.log('play');
this.isplay = true;
},
pause: function () {
// console.log('pause')
this.isplay = false;
},
//播放mv
playMv: function (mvid) {
var that = this;
axios.get('https://autumnfish.cn/mv/url?id=' + mvid)
.then(function (response) {
// console.log(response);
console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
console.log(that.mvUrl);
}, function (err) { })
},
hide: function () {
this.isShow = false
}
}
})
</script>
</body>
</html>
