网易云音乐——歌曲播放器页面

git地址

https://gitee.com/chen-haibin799/netease-cloud-music.git

实现步骤

效果图

1.实现顶部导航栏

这个写基础样式即可

注意点：

使用vant组件的 van-nav-bar 的默认背景颜色为白色

这里需要设置为：
```
background-color: transparent
```

    <van-nav-bar style="background-color: transparent;position: relative;z-index: 4;height: 50px;color: white"><template #left><van-icon @click="$router.back()" name="xiajiantou" size="18" class-prefix="iconfont"/></template><template #title><div style="font-size: 18px;margin-top: 8px;color: white">{{ data.uiElement.mainTitle.title }}</div><div style="font-size: 12px;color: #666">{{ data.resourceExtInfo.artists[0].name }}></div></template><template #right><van-icon name="fenxiang" size="18" class-prefix="iconfont"/></template></van-nav-bar>

2.实现中间图标旋转

<divstyle="display: flex;position: relative;z-index: 3;justify-content: center;align-items: center;padding: 150px 0"><divstyle="text-align: center;background-color: #101012;width: 200px;height: 200px;border-radius: 50%;"><img :src="data.uiElement.image.imageUrl" :class="musicState==='true'?'img1':'img2'"style="width: 140px;height:140px;border-radius: 50%;line-height: 200px;margin-top: 30px"></div></div>

.img1 {animation: rotateImg 10s linear infinite;animation-play-state: running;
}.img2 {animation-play-state: paused;
}

3.实现背景图片模糊

最外层css样式

需要设置在before中，添加filter，background设置inherit
下层子元素的z-index要超过2，并且position为relative

 z-index: 1;position: relative;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;.musicPlayBack:before {content: "";width: 100%;height: 100%;z-index: 2;filter: blur(8px);position: absolute;top: 0;left: 0;background: inherit;
}

4.进度条

这里采用vant的van-slider来实现

通过组件的v-model来定义其初始值，max来设置最大值，change方法来实现改变拖动进度条

<div style="display: flex;position: relative;z-index: 4;align-items: center"><div style="font-size: 22px;">{{ currentTime }}</div><van-slider v-model="audio" @change="onChange" button-size="12px" style="margin-left: 10px":max="maxTime"></van-slider><div style="font-size: 22px;">{{ endTime }}</div></div>

// 获取结束时间musicLength() {this.$store.dispatch('changeTotalTime', this.$store.state.playMusics.length)this.endTime = this.$store.state.playMusics.totalDivide + ':' + this.$store.state.playMusics.totalSecond},// 进度条拖动变化onChange(value) {this.audio = valuethis.$store.state.musicAudio.music.currentTime = value// 如果当前为暂停状态if (this.musicState === 'false') {this.zanting = 'zanting'this.$store.state.musicAudio.music.play()this.$store.dispatch("changeMusicState", 'true')}}

详细代码：

<!--Copyright (c) chb my copyright message. 2022-2023. All rights reserved.--><template><div class="musicPlayBack":style="{backgroundImage: 'url(' +data.uiElement.image.imageUrl +')'  }"><van-nav-bar style="background-color: transparent;position: relative;z-index: 4;height: 50px;color: white"><template #left><van-icon @click="$router.back()" name="xiajiantou" size="18" class-prefix="iconfont"/></template><template #title><div style="font-size: 18px;margin-top: 8px;color: white">{{ data.uiElement.mainTitle.title }}</div><div style="font-size: 12px;color: #666">{{ data.resourceExtInfo.artists[0].name }}></div></template><template #right><van-icon name="fenxiang" size="18" class-prefix="iconfont"/></template></van-nav-bar><!-- 中间图片   --><divstyle="display: flex;position: relative;z-index: 3;justify-content: center;align-items: center;padding: 150px 0"><divstyle="text-align: center;background-color: #101012;width: 200px;height: 200px;border-radius: 50%;"><img :src="data.uiElement.image.imageUrl" :class="musicState==='true'?'img1':'img2'"style="width: 140px;height:140px;border-radius: 50%;line-height: 200px;margin-top: 30px"></div></div><div style="color: white;z-index: 4;position: relative;display: flex;justify-content: space-around"><div @click="addLike"><van-icon v-if="data.resourceExtInfo.songData.album.onSale===false" name="shoucang1" size="22"class-prefix="iconfont"/><van-icon v-else name="daohangshoucangyishoucang" size="22" class-prefix="iconfont" color="#fe373a"/></div><van-icon name="xiazaidaoru" size="28" class-prefix="iconfont"/><van-icon name="heijiaochangpianji" size="28" class-prefix="iconfont"/><van-icon name="comment" size="28" class-prefix="iconfont"/><van-icon name="gengduo-shuxiang" size="28" class-prefix="iconfont"/></div><!--  布进器  --><div style="display: flex;position: relative;z-index: 4;align-items: center"><div style="font-size: 22px;">{{ currentTime }}</div><van-slider v-model="audio" @change="onChange" button-size="12px" style="margin-left: 10px":max="maxTime"></van-slider><div style="font-size: 22px;">{{ endTime }}</div></div><divstyle="color: white;position: relative;z-index: 3;display: flex;margin-top: 22px;justify-content: space-around;align-items: center;"><div><van-icon :name="shunxubofang" size="22" class-prefix="iconfont"/></div><van-icon name="shangyishoushangyige" size="28" class-prefix="iconfont"/><van-icon :name="zanting" size="46" @click="startOrStop" class-prefix="iconfont"/><van-icon name="xiayigexiayishou" size="28" class-prefix="iconfont"/><van-icon name="24gl-playlistMusic" size="28" class-prefix="iconfont"/></div></div>
</template><script>
import {addLike} from "../api/like";
import {getSongUrl} from "../api/song";export default {name: "musicPlayBack",data() {return {data: {},audio: 0,//音频播放的位置和音频的时间maxTime: 100,//最大值shunxubofang: 'shunxubofang',zanting: 'zanting',audioUrl: '',currentTime: '00:00',endTime: '00:00',}},computed: {musicState() {return this.$store.state.playMusics.state}},created() {this.data = JSON.parse(this.$route.query.data)this.init()},methods: {// 初始化音乐并开始播放init() {let self = thisconsole.log(this.data)getSongUrl(this.data.resourceExtInfo.songPrivilege.id).then(res => {this.audioUrl = res.data.data[0].urlthis.$store.dispatch("changeAudio", res.data.data[0].url)this.$store.dispatch("changeMusicState", 'true')this.$store.state.musicAudio.music.play()this.musicLength()let music = this.$store.state.musicAudio.music// 获取进度条时间music.addEventListener('loadedmetadata', () => {setInterval(function () {let month = Math.floor(music.currentTime / 60) < 10 ? '0' + Math.floor(music.currentTime / 60) : Math.floor(music.currentTime / 60)let secomds = Math.floor(music.currentTime % 60 % 60) < 10 ? '0' + Math.floor(music.currentTime % 60 % 60) : Math.floor(music.currentTime % 60 % 60)self.currentTime = month + ":" + secomdsself.audio = music.currentTimeself.maxTime = music.duration}, 1000)})})},// 加入喜欢addLike() {let like = truelet that = thislike = this.data.resourceExtInfo.songData.album.onSale === false;addLike(this.data.resourceExtInfo.song.id, like).then(res => {})},// 切换播放状态startOrStop() {if (this.musicState === 'true') {// 暂停this.$store.state.musicAudio.music.pause()this.$store.dispatch("changeMusicState", 'false')this.zanting = 'bofang'} else {this.zanting = 'zanting'this.$store.state.musicAudio.music.play()this.$store.dispatch("changeMusicState", 'true');}},// 获取结束时间musicLength() {this.$store.dispatch('changeTotalTime', this.$store.state.playMusics.length)this.endTime = this.$store.state.playMusics.totalDivide + ':' + this.$store.state.playMusics.totalSecond},// 进度条拖动变化onChange(value) {this.audio = valuethis.$store.state.musicAudio.music.currentTime = value// 如果当前为暂停状态if (this.musicState === 'false') {this.zanting = 'zanting'this.$store.state.musicAudio.music.play()this.$store.dispatch("changeMusicState", 'true')}}}
}
</script><style scoped lang="scss">
.musicPlayBack {z-index: 1;position: relative;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;.bottomToggle {position: fixed;height: 60px;bottom: 0;}
}.musicPlayBack:before {content: "";width: 100%;height: 100%;z-index: 2;filter: blur(8px);position: absolute;top: 0;left: 0;background: inherit;
}.img1 {animation: rotateImg 10s linear infinite;animation-play-state: running;
}.img2 {animation-play-state: paused;
}.paused {animation-play-state: paused;
}@keyframes rotateImg {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}</style>

网易云音乐——歌曲播放器页面相关推荐

获得网易云音乐歌曲播放的url
获得网易云音乐歌曲播放的url 首先打开F12开发者工具,点击NetWork,Media过滤一些不必要的请求搜索你要的歌曲,这里例举阿司匹林点击播放这边会显示请求点击Size最大的请求,复制其 ...
python +tkinter 打造网易云音乐下载播放器
先上图],本次爬取得是网易云音乐,因为接口很方便,还没试百度云音乐, 提供2种下载方式,单曲下载和url歌单链接批量下载,自动识别单曲或者是歌单链接,[正则表达式匹配] 由于搜索单曲,歌曲列表经过筛选 ...
低仿网易云音乐音频播放器！自动获取歌曲封面，并旋转
这个是实习的时候做的了,当时看了半本第一行代码就去上班,Java 都没学过,最后实习走的时候还做了挺多东西,这个音频播放器就是其一,现在写个博客纪念一下上班两年了,虽然还是菜狗程序员! 前言实习的时 ...
YesPlayMusic for Mac(高颜值网易云音乐第三方播放器)
YesPlayMusic是一款在线第三方网易云播放器,软件的界面颜值更高更精简,对歌曲信息.歌词等做了极大的显示优化,同时也会有无损优质的音乐播放表现,软件支持mv播放,会显示歌曲的专辑信息,作为一款 ...
高颜值网易云音乐第三方播放器 YesPlayMusic Mac中文版支持m1
YesPlayMusic,一款高颜值的第三方网易云播放器,不仅设计精美,播放体验很优秀,而且可以听一些灰色和 VIP 的歌曲,支持网易云账号登录,还可以进行 MV 播放和歌词显示.支持 Unblock ...
热门免费的：YesPlayMusic Mac(高颜值网易云音乐第三方播放器)
YesPlayMusic,一款高颜值的第三方网易云播放器,不仅设计精美,播放体验很优秀,而且可以听一些灰色和 VIP 的歌曲,支持网易云账号登录,还可以进行 MV 播放和歌词显示.支持 Unblock ...
Android初级，实现网易云音乐歌曲列表界面效果，播放界面效果，ListView，ViewPager方法详解
初学Android初级,第一篇博客文章,如有错误,还望批评指正! 本文主要内容以网易云音乐歌曲列表界面效果代码,播放音乐界面效果代码为主,并将ListView和ViewPager作为实现界面滑动功能的 ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
用python爬取网易云评论最多的歌_巧用Python爬取网易云音乐歌曲全部评论
一.首先分析数据的请求方式网易云音乐歌曲页面的URL形式为https://music.163.com/#/song?id=歌曲id号,这里我用Delacey的Dream it possible 为例 ...

网易云音乐——歌曲播放器页面

网易云音乐——歌曲播放器页面

1.实现顶部导航栏

2.实现中间图标旋转

3.实现背景图片模糊

4.进度条

网易云音乐——歌曲播放器页面相关推荐

最新文章

热门文章