播放界面实现

1、准备工作
2、顶部布局
3、中部唱片部分布局
4、底部部分布局

最后一个页面还没写完，由于我要去比赛，所以暂时先写到这，等放假了再写

其他页面可以看我页面专栏 Vue3实战项目-网易云APP 。
大家觉得有些地方可以写的更好写法可以给我留言私信，我会去修改
如果文章对你有帮助请点一个赞或收藏，谢谢

1、准备工作

然后我们来实现播放界面也就是下面这张图

这是一个新的页面，我们还是利用路由进行跳转，先创建一个playerUi.vue

然后，我们在router中设置路由

,{path: '/PlayerUi',name: 'PlayerUi',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/PlayerUi.vue')}

然后我们设置路由跳转，根据手机App上的网易云，我们可以知道，歌单列表左边部分可以跳转到该页面还有下面播放按钮的左边部分

那么我们就在这两个部分设置路由跳转，这两个位置分别在playlistView.vue和playController.vue下

然后效果就是下面这样

然后我们开始找资源，找下面两张图片，接口我没有看见有图片。

我们打开网易云音乐的官网，随便点击一首歌，用f12用手机的宽度去打开

https://music.163.com/

然后我们点击network 选择Img

找到这几张图片，双击会跳转到单独的页面右键保存即可

然后给它拖到assets文件夹中的img文件夹下面就好了，然后我们来看看接口文档，我们需要的是歌曲的详情和歌词

然后我们在api这个文件夹的index.js下封装一下，

//  获取歌曲详细
function postSongDetail(id){return axios.post(`${baseUrl}/song/detail?ids=${id}`)}//  获取歌词
function postLyric(id){return axios.post(`${baseUrl}/lyric?id=${id}`)}

然后我们在到 PlayerUi.vue 中测试一下

<script>
import palyerUiTop  from '@/components/playerUi/palyerUiTop.vue'import { onMounted,reactive } from 'vue';
import {useRoute} from 'vue-router'
import {postLyric,postSongDetail} from '@/api/index';
export default {components:{palyerUiTop},setup(){const route = useRoute()let stateLyric = reactive({})let stateSongDetail = reactive({})onMounted(async()=>{// 接收传过来的歌曲IDlet id = route.query.id// 请求let Lyric = await postLyric(id) let SongDetail =  await postSongDetail(id)// 接收数据stateLyric = Lyric.datastateSongDetail = SongDetail.dataconsole.log(Lyric.data);console.log(stateSongDetail);})}
}
</script>

这样就算好了，然后数据我们等会在处理，先把框架搭好，然后我们在components下创建一个文件夹，取名叫playerUi，新建一个子组件 playerUiTop.vue 开始写顶部

2、顶部布局

接下来我们实现顶部的布局

先把图标引用进来，这里的歌名和作者，我们临时给它定一个，先调整样式，在接收数据进行处理。

<template><div class="playUiTop"><!-- 左边返回键 --><div class="left"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangxiajiantou"></use></svg></div><!-- 中间歌名和作者名 --><div class="middle"><div class="title">title</div><div class="name">777</div></div><!-- 右边分享 --><div class="right"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg></div></div>
</template>

然后我们来调整样式，同样利用flex布局使它平均分布，然后给上边距。

.playUiTop{display: flex;justify-content: space-between;padding-top: 10px;
}

这里的左右边距，我是在playerUi.vue中给的

.palyerUi{width: 7.5rem;padding: 0 0.4rem;
}

接下来调整图标大小就可以了，然后给上一个白色的效果

  .icon{width: 0.5rem;height: 0.5rem;fill: #fff;}

由于背景是白色的，所以有点看不清楚，等会我们接收数据渲染背景就好了。然后调整中间的字体，这里少了一个 >的图标，我们给它加上

      <div class="name">777<svg class="icon" aria-hidden="true"><use xlink:href="#icon-gengduo1"></use></svg></div>

然后，我们看到这个图标也是受到影响的，我们也给它调整一下，顺便调整一下字体

  .middle{color: #fff;align-items: center;.title{font-size: 20px;}.name{opacity: 0.5;}.icon{width: 0.24rem;height: 0.24rem;}}

然后整体居中一下

align-items:Center;

然后，我们把数据传过来，渲染一下标题，背景的话我打算直接在PlayerUi.vue中渲染,这里修改一下接收参数

它这里是这样的，我们也改成这样样子

        let stateSongDetail = reactive({songs:{}})stateSongDetail.songs = SongDetail.data.songs[0]

然后把数据传给playerUiTop.vue

<palyerUiTop :songs = "stateSongDetail.songs"></palyerUiTop>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBPs1rY8-1656895020777)

然后我们先做一下背景，不然看不出效果

很显然这个背景又是加了滤镜的，我们只需要把这个图片请求下来然后加滤镜就好了，我们首先加个img

<img class="bg" :src="stateSongDetail.songs.al.picUrl" alt="">

z’za

这个样式，我们在歌单列表用过，所以直接拷过来就行

.bg{position:fixed;left:0;top: 0;width: 7.5rem;z-index: -1;filter: blur(100px);overflow: hidden;transform: scale(4);
}

效果就是这样，然后我们回到playerUiTop.vue中，把歌名和作者渲染一下，这里接收一下数据

  props:['songs'],

    <!-- 中间歌名和作者名 --><div class="middle"><div class="title">{{songs.name}}</div><!-- 作者名 --><div class="name"><span v-for="(itemName,j) in songs.ar" :key = "j"><span v-if="j==songs.ar.length-1">{{itemName.name}}</span><span v-else>{{itemName.name}}/</span></span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gengduo1"></use></svg></div></div>

这里的字体没有居中，然后应该你们的字体会大一点，我这里给它调小了，然后我们来修改一下字体

    .title{font-size: 15px;text-align: center;}.name{opacity: 0.5;text-align: center;}

效果就出来了。然后这里的文字还有个走马灯效果，我这里就偷个懒借用vant3中的NoticeBar 通知栏,vant不会引用的看官方文档或者我的Vue3+node.js网易云音乐实战项目(三)这篇中的轮播图实现，这里我采用下面这种方式

然后咱稍微修改一下代码

<van-notice-bar  :text= "songs.name" color="#fff" background="transparent"  />

    .van-notice-bar{font-size: 15px;width: 3rem;}

效果

然后这里需要给个宽度，让它不超出款的时候不动

    .van-notice-bar{font-size: 15px;width: 4rem;/deep/.van-notice-bar__wrap{.van-notice-bar__content{padding-left: 35px;}}

然后这里要给个/deep/ 不然设置不了，然后居中属性我一直没调好，就只能给个内边距，这里有其他方法可以给我留个言

最后给加个返回事件

<div class="left" @click="$router.back()" >
</div>

3、中部唱片部分布局

我们开始做唱片部分，也就是下面这个部分，

之前准备工作那里，我们已经下载好了放在了assets的img下面，现在我们把它引用进来，先创建好一个子组件palerUiDisc.vue组件，然后在PlayerUI.vue中引用

<template><div class="playerUiDisc"><div class="img"><img class="needle" src="@/assets/img/needle-ab.png" alt=""><img class="circle" src="@/assets/img/circle.png" alt=""><img class="playImg" :src="songs.al.picUrl" alt=""></div><div class="bottonIcon"></div>
</template>

然后我们来调整大小和宽度，这里利用定位去做

.img{position: absolute;width: 7.5rem;height: 7.5rem;left: 0;top: 1.5rem;.needle{width: 2.5rem;height: auto;position: absolute;left: 3.3rem;// 旋转transform-origin: 0.3rem 0;//旋转多少transform: rotate(-20deg);z-index: 10;}.circle{width: 5.5rem;height: auto;position: absolute;left:calc(50% - 2.75rem) ;top: 2.5rem;}
}

然后这样摆臂是个活动的，那我们在给它加一个active状态,这里我们可以用浏览器去先调整一下样式，看看要到多少合适

很显然到3的时候，效果最好，那我我们就摆动到3

    .needle.active{width: 2.5rem;height: auto;position: absolute;left: 3.3rem;// 旋转多少度transform-origin: 0.3rem 0;transform: rotate(3deg);z-index: 10;}

然后我们来给个图片试试效果，这里先从PlayerUi.vue传数据过来

这边接收一下

//template
<img class="playImg" :src="songs.al.picUrl" alt="">
//script
props:['songs']

调整一下大小和位置

    .playImg{width: 3.4rem;height: 3.4rem;border-radius: 100%;position: absolute;left:calc(50% - 1.7rem) ;top: 3.55rem;}

接下来实现这个部分

找好图标把图标放进去

      <div class="bottonIcon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiazai"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-changpian"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun-"></use></svg> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-gengduo-shuxiang"></use></svg> </div>

调整一下边距和位置还有大小

     .bottonIcon{width: 7.5rem;display: flex;justify-content: space-evenly;position: absolute;bottom: 3rem;left:calc(50% - 3.7rem) ;.icon{width: 0.5rem;height: 0.5rem;fill: #fff;}}

然后这里还有个问题，如果有些时候没有请求到图片，我们需要把唱片改成红色的底片。我们利用v-if来进行判断

        <img class="playImg" v-if="songs.al.picUrl"  :src="songs.al.picUrl" alt=""><img class="playImg" v-else="songs.al.picUrl"  src="@/assets/img/disc.png" alt="">

然后大的背景也是一样的，我们也做一下修改

      <img class="bg" v-if="stateSongDetail.songs.al.picUrl" :src="stateSongDetail.songs.al.picUrl" alt=""><img class="bg" v-else="stateSongDetail.songs.al.picUrl" src="@/assets/img/disc.png" alt="">

4、底部部分布局

接下来，我们来实现底部部分的布局

先把大的框架搭好

<template><div class="playUiButton"><div class="top"></div><div class="button"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg> </div></div>
</template>

首先是上面的一部分，一个进度条，我们还是采用vant的进度条来弄

先把它插入进来，设置一下颜色和字，具体参数可以看vant

      <div class="top"><van-progress :percentage="5" pivot-text=" "  color="#fff" stroke-width="1px" /></div>

然后给它变成圆角,设置一下长度

.top{/deep/.van-progress{color:#fff;width: 6rem;.van-progress__pivot{font-size: 1px;width: 0.2rem;height: 0.2rem;border-radius: 100%;}}
}

然后我们利用定位调整一下位置

    .top{display: flex;position: absolute;left: 0;bottom: 2rem;/deep/.van-progress{color:#fff;width: 5rem;position: absolute;left:58px ;.van-progress__pivot{font-size: 1px;width: 0.2rem;height: 0.2rem;border-radius: 100%;}}
}

左右两边价格时间戳，先占个位置。

          <p class="p1">00:00</p><van-progress :percentage="5" pivot-text=" "  color="#fff" stroke-width="1px" /><p class="p2">00:00</p>

        .p1{position: absolute;left: 0.1rem;top: -10px;}.p2{position: absolute;left: 6.4rem;top: -10px;}

然后接下来调整下面这部分的按钮，在这个之前我们先把播放组件取消显示

Vue3+node.js网易云音乐实战项目(八)相关推荐

Vue3+node.js网易云音乐实战项目(五)
推荐歌单详细页面顶部 1.推荐歌单详细页面 1.1.导航条和背景 1.2.头像和简介 1.3.头部完整代码 1.4.链接实现效果 1.推荐歌单详细页面 1.1.导航条和背景推荐歌单页面做好后,我们 ...
Vue3+node.js网易云音乐实战项目(三)
页面一.头部导航栏布局二.轮播图的实现三.请求网易的banner图四链接一.头部导航栏布局首先我们看最上面这里的布局,大致可分为三个模块,顶部左边,顶部中间,顶部右边那么我们在comp ...
Vue3+node.js网易云音乐实战项目(七)
底部播放按钮和播放功能的实现 1.底部播放组件 2.音乐播放与暂停 3.切换歌曲其他页面可以看我页面专栏 Vue3实战项目-网易云APP . 大家觉得有些地方可以写的更好写法可以给我留言私信,我会去 ...
Vue3+node.js网易云音乐实战项目(六)
图标和播放列表实现 1.收藏.评论和分享图标 2.播放列表其他页面可以看我页面专栏 Vue3实战项目-网易云APP . 如果文章对你有帮助请点一个赞或收藏 1.收藏.评论和分享图标接下来,我们实现 ...
react 网易云音乐实战项目笔记
0.项目规范一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向访问 /路径 => ...
开源的网易云音乐API项目都是怎么实现的？
上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器,这篇文章我们来详细了解一下其中使用到的网易云音乐api项目NeteaseCloudMusicApi的实 ...
node实现网易云音乐项目前后端连接
1完善网易云音乐.读取静态资源.实现用户登录以后,登录的内容转换成欢迎XXXX登录后台文件代码 const fs=require('fs'); const http=require('http'); ...
[Vue仿网易云音乐实战]炎炎夏日——放首自己喜欢的歌
前言基于 Vue + vuex + vue-router + vue-axios +better-scroll + Stylus + px2rem 等开发的移动端音乐App,UI 界面是看着自己手机 ...
一个开源的网易云音乐api项目
昨天在Github上发现了一个开源的音乐api项目,restful风格,Json格式,提供的功能真的是史上最全,足够你开发一款属于自己的客户端了.而且作者非常贴心,除了开源了这个项目外还提供了一份详细 ...

Vue3+node.js网易云音乐实战项目(八)