大家好,又见面了,我是你们的朋友全栈君。
总结一下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;
}
至此,音乐播放器大功告成!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149949.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...