vue仿移动端音乐播放器

工作之余查了很多资料一步步摸索出来的，先感谢各位大佬。
仿QQ音乐做的，不是100%还原，不过基本原理都在这了，结合之前的歌词滚动组件一起使用

页面布局拆分

总体分为
1顶部歌名+歌手的top-bar模块+模糊背景
2专辑+歌词滚动模块
3进度条+时间模块
4播放控件模块，播放，暂停，上一曲，下一曲。

第一部分
需要定一个固定在页面的div做模糊背景，然后平铺一个APP-bar

<template><div class="main-page" ref="MainRef"><divclass="background-flitter":style="`background-image: url(${songInfo.cover})`"></div><div class="top-bar"><p>{{ songInfo.name }}</p><p style="font-size: 0.24rem;font-weight: 500">{{ songInfo.artistsName }}</p></div></div>
</template>

具体的歌曲信息如下

data: (){return {{albumId: 93162249,albumTitle: "STRAY SHEEP",artistsName: "米津玄師",cover:"https://p1.music.126.net/6mhlWCOOQkT0xDjjuCLW7g==/109951165181187586.jpg",id: 1466598056,index: 7,name: "Lemon",url:"https://music.163.com/song/media/outer/url?id=1466598056.mp3",},}
}

我的data预览图

<style lang="less" scoped>
.main-page {width: 100%;height: 100vh;position: relative;background: rgba(15, 15, 15, 0.3);.background-flitter {position: fixed;z-index: -2;background-repeat: no-repeat;width: 100%;height: 100vh;top: 0;left: 0;background-size: cover;background-position: 50%;filter: blur(0.16rem);opacity: 0.7;overflow: hidden;box-sizing: border-box;}.top-bar {width: 100%;height: 1.2rem;text-align: center;color: #fff;font-size: 0.32rem;line-height: 0.6rem;font-weight: 600;}
}
</style>

至此完成整体背景和top-bar部分
##第二部分，专辑+歌词滚动
左右滑动切换用到了swiper组件，专辑+歌词和纯歌词分别放在两个slide就可以了。
先固定一个歌词容器，与top-bar同级,具体代码可以参考歌词组件封装来看，都是复用的代码。
移动端歌词滚动组件

  <div class="lyric-container"><div class="swiper-contain"><div class="swiper-wrapper"><div class="swiper-slide"><div class="disc-cover"><div class="disc" ref="rotate">//ref="rotate"<img :src="songInfo.cover" alt="" /></div></div><div class="text-container"><div class="text-list" :style="lyricMiniTop"><pv-for="(item, index) in lyricInfo":key="index":style="{                                        color:
                                            lyricIndex === index
                                                ? colorLight
                                                : color,
                                    }">{{ item.lyric }}</p></div></div></div><div class="swiper-slide"><l-scrollref="lyric":color="color":colorLight="colorLight":lineHeight="lineHeight":paddingTop="paddingTop":fontSize="fontSize":lyricIndex="lyricIndex":lyricsList="lyricInfo"></l-scroll></div></div></div></div>

唱片旋转效果animation和animation-play-state: paused;

                        .disc {width: 5rem;height: 5rem;border-radius: 50%;box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);animation: animations1 12s linear infinite forwards;animation-play-state: paused;overflow: hidden;img {width: 100%;height: 100%;}}@keyframes animations1 {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

在播放事件中添加

        //播放与暂停play() {if (this.playing) {// 播放中,点击则为暂停this.playing = false;this.$refs.rotate.style.animationPlayState = "paused";audio.pause();} else {// 暂停中,点击则为播放this.playing = true;this.$refs.rotate.style.animationPlayState = "running";audio.play();}},

到这完成了歌词滚动和切换

第三部分，进度条点击和拖拽控制播放进度
样式，时长比这些都讲烂了，讲讲点击和拖拽控制播放进度吧
拖拽功能：给拖拽按钮，也就是示例图的白色进度按钮添加三个事件
用拖动后的X坐标-起始坐标变得到拖动的位移距离，再比上总进度距离就得到当前播放百分比了

                <divclass="play-point"@touchstart.stop.prevent="touchstart"@touchmove.stop.prevent="touchmove"@touchend.stop.prevent="touchend":style="{                        transform: 'translateX(' + thumbTranslateX + 'rem)',
                    }"></div>

        //控制播放进度SetProgress(t) {audio.currentTime = audio.duration * t;},touchstart(event) {let progressL = this.$refs.track.offsetWidth ; // 进度条总宽度let allL = this.$refs.MainRef.offsetWidth ; // 页面总宽度//因为我的结构如上图，总宽度-进度条除2得到进度条距离左边的X值let half = (allL-progressL)/2console.log("开始", progressL, allL, half)//记录开始的X轴坐标if (this.startXFirst) {this.startX = half;this.startXFirst = false;}},touchmove(event) {let moveX = parseInt((event.changedTouches[0].clientX - this.startX));let progressL = this.$refs.track.offsetWidth; // 进度条总长let percent = (moveX / progressL).toFixed(2); //拖动%比if(percent>1){percent = 1}this.audioPercent = percent; //音频播放%this.thumbTranslateX = this.audioPercent * 4; //计算滑块位移},touchend(event) {console.log("结束",event)this.finalX = parseInt(event.changedTouches[0].clientX - this.startX);let progressL = this.$refs.track.offsetWidth; // 进度条总长let time = (this.finalX / progressL).toFixed(2);if(time>1){time = 1}this.SetProgress(time);},

点击实现进度则简单多了，

            <divclass="progress"@click="HandleProgressClick($event)"ref="track"><divclass="progress_box":style="{ width: audioProgressPercent }"></div><divclass="play-point"@touchstart.stop.prevent="touchstart"@touchmove.stop.prevent="touchmove"@touchend.stop.prevent="touchend":style="{                        transform: 'translateX(' + thumbTranslateX + 'rem)',
                    }"></div></div>

        //点击进度条HandleProgressClick(event) {let progressL = this.$refs.track.offsetWidth; // 进度条总长let clickX = event.offsetX;let time = (clickX / progressL).toFixed(2);this.SetProgress(time);},

OK ，第三部分完成
第四部分就是上一曲下一曲播放暂停了，这些都是别人讲了好多遍的就不赘述了。
有疑问或者更多想法的都可以提出来一起探讨~

vue仿移动端音乐播放器相关推荐

Vue仿网易云音乐播放器（一）
项目简介写了很多关于Vue的项目,都是一部分一部分的小模块,这次想把全部学过的关于Vue知识和模块写成一个完整的项目.都是组件化进行mvvm模式开发,实现了view和data的同步更新.仿网易云播放 ...
Vue仿网易云音乐播放器（二）
项目运行首先要安装npm或者cnpm和node.js环境在终端建立vue-cli项目,命令行cnpm install vue-cli -g //全局安装 vue-cli 查看vue-cli是否成功 ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
HTML5移动端音乐播放器（启蒙篇）
这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目. 在线地址:请猛击这里源码:请猛击这里 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
【游戏开发创新】手把手教你使用Unity制作一个高仿酷狗音乐播放器，滨崎步，旋律起，爷青回（声音可视化 | 频谱 | Audio）
文章目录一.前言二.获取UI素材三.使用UGUI制作界面 1.界面布局 2.账号圆形头像 3.搜索框 4.调节UI层 5.黑色按钮悬浮高亮效果 6.纯文字按钮 7.滚动列表自适应 8.歌名与视频 ...
仿酷狗音乐播放器已开源！
转载请说明原出处,谢谢:http://blog.csdn.net/zhuhongshu/article/details/41037875 距离我发布测试版的Redrain音乐盒(仿酷狗播放器),现在正 ...

vue仿移动端音乐播放器

vue仿移动端音乐播放器相关推荐

最新文章

热门文章