仿网易云风格的vue网页音乐播放器

我要开发同款
my麦呢2023年07月27日
130阅读
所属分类H5网站

作品详情

既然是要做一款音乐播放器的话,我的想法呢是去实现一款和外观上美观,符合现在流行的一些主流音乐播放器的样式去完成一款简约风的音乐播放器,一些控件呀什么的可以去尽量模仿如网易云啊qq音乐啊这样子的界面,一些ui呀就像ios那样,简单好看,出于这个目的我们在编写程序方面使用了JS的vue框架去达成这样一个美观简约的画面项目需求的界面要求是界面友好,让用户使用方便。出于个人喜好相关,我觉得我们播放器的风格一是要向主流音乐播放器看齐吧,二是要有有那样一股好像ios系统的简约风,我个人很喜欢这样的风格,所以我的播放器吧就想朝着这两个方向努力。然后是具体界面怎么设计吧,下面是我的想法首先整体布局吧我选择像网易云一样将页面划分成4个板块,分别是最上方的导航栏,最下方的音乐播放栏,左侧的主菜单栏,和最中央的页面部分首先是头部的顶部栏(headerBar),在这上面我想集成的功能有页面的前进和后退,搜索功能(用来查找歌曲啊歌单什么的)还有登录功能(登录自己的网易云账号来用api调用自己账号的一些数据来实现一些功能)音乐播放栏(Player):用来切换播放模式(当歌曲结束后进行切换歌曲来体现各种播放模式,我觉得应该有的是顺序播放、单曲循环、随机播放、心动模式(顺序播放喜欢的歌曲)),喜欢按键(用来标记/收藏喜欢的歌曲),音量控制,播放歌单列表(可以上传本地歌曲播放、展示我喜欢歌单、最近播放歌曲,也可以给歌曲添加喜欢或者从播放列表删除),进度条主菜单栏(MeneuBar):用来定位到不同的功能页面,有首页(自定义的首页,展示热门歌曲和热门歌单),乐库(集成热门歌曲部分、歌单部分、mv部分、每日推荐),视频(mv),歌单(展示推荐歌单),主题(深色模式切换和部分组件颜色切换),登录账号的歌单展示还有一些歌曲的页面:歌曲播放页面:展示歌词、展示歌曲评论 在各种界面的歌曲列表:有歌手专辑时长信息,可以播放、显示有无mv播放 歌单界面:显示歌曲列表,展示歌单评论
查看全文
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论