当前位置: 首页 > Web前端 > vue.js

这款好看的开源第三方网易云音乐播放器,值得拥有

时间:2023-03-31 23:24:47 vue.js

简介我主要的听歌软件是网易云音乐,但是它有很多花哨的功能,比如电台,直播,交友,播客,云寨之类的,说实话这些我都不需要,基本也不知道怎么用。大多数时候,我只是把它当作本地播放器来使用,因为它毕竟是商业软件,需要赚钱,所以我能理解。相对来说,电脑端的客户端会更简单,网页版最纯粹,但外观一般(每个人的审美可能不同,这只是个人看法~)。那么有没有一款简单、纯净、美观的网易云音乐播放器呢?答案是肯定的,它是:YesPlayMusic,一个开源的第三方实现。项目地址:https://github.com/qier222/YesPlayMusic。这个项目目前有18.1kstars,已经不少了。项目基于Vue.js全家桶开发。它是一个web项目,但是通过Electron支持打包到macOS、Windows和Linux平台的客户端。当然,这个项目的基础是另外一个开源项目:https://github.com/Binaryify/NeteaseCloudMusicApi,顾名思义就是网易云音乐的api,也是一个支持所有的第三方项目官方接口,使用nodejs开发,基于express框架,请求库使用axios,原理是跨站请求伪造(CSRF),通过伪造请求头,调用官方API,只是因为我们的网站域名不同来自网易云音乐的域名,如果直接请求网易云音乐的官方接口,网易云音乐的服务器和浏览器为了安全不允许我们这样做,所以我们需要一个不会被限制的中间人,就是,后端服务,然后我们网站请求这个服务接口,带上认证cookie,这个服务使用cookie,另外伪造一些请求头,目的是让网易云音乐官方服务器认为我t是一个浏览器,这样可以帮我们调整网易云音乐官方的接口,然后这个服务再设置为允许跨域请求,那么我们的网站就可以通过请求这个中间人来获取网易云音乐的官方数据了。功能&界面首先,我们来看一下它的基本功能和界面。登录支持扫码、邮箱登录和手机号登录,不支持验证码登录和第三方登录,不过也够用了。如果你不想登录,可以直接搜索你的用户名,也可以收听你的播放列表,但是有些隐私数据是看不到的:首页的栏目分别是:byAppleMusic,推荐播放列表,For你(每日推荐)、推荐艺人、新专辑速递、排行榜。byAppleMusic是一个硬编码的栏目:ForYou是每日推荐,需要登录才能使用。发现页面首页部分栏目可以点击查看全部并跳转到发现页面。当然,你也可以直接点击顶部的标签切换到发现页面。发现页主要是查看推荐歌单、排行榜,分类搜索歌单:音乐库音乐库需要登录后才能使用,是您的个人空间。您可以查看自己喜欢的歌曲、喜欢的播放列表、专辑、艺术家、MV、云盘和听歌排行榜:搜索搜索结果包括:艺术家、专辑、歌曲、视频和播放列表:播放列表详情点击播放列表或专辑跳转到播放列表详细信息页面。在详情页,您可以查看介绍和播放列表中的所有歌曲。当然你也可以播放:播放功能在播放的最后,会在底部固定一个播放栏,显示当前正在播放的歌曲,也可以用来控制播放和切歌:点击底栏打开全屏播放界面,可以看到歌词:评论功能听歌看评论已经成为一种习惯。评论本来是网易云音乐的一个功能,可惜这个项目不支持查看评论的功能,而且作者也明确表示不会支持:因为是开源的,所以作者不支持,并且他自己可以支持,所以我fork了一天,添加了查看,发帖,回复,点赞评论的功能。入口在底部播放栏:点击后全屏显示评论列表:支持按热度和时间排序,也支持查看楼层回复。可以评论歌曲,也可以点击某楼层回复,但是目前有一个小问题,发表的评论或者点赞数据不会立即出现,需要等待一段时间(两分钟)刷新列表之前会显示,原因是api服务增加了缓存处理:为了不被官方服务器屏蔽,我没有去掉或者修改缓存时间。使用如果你看到这个并且已经很兴奋,那么你就可以开始使用它了。首先,如果你不想折腾,可以直接在线使用。不需要评论功能,直接访问本项目提供的默认在线地址:https://music。qier222.com/.如果需要评论功能,可以使用我修改部署的地址:https://music.lxqnsys.com/。当然,同时我也打包了客户端安装包。如果喜欢通过客户端使用,可以到这里下载https://github.com/wanglin2/YesPlayMusic。本项目本身支持多种部署方式,部署到Vercel(Vercel是一个零配置的静态资源和无服务器云计算(serverless)部署平台)、部署到自己的服务器、Docker部署等,这里只介绍第一种,因为它不仅免费、简单,还可以生成自己的地址,不用担心使用别人的地址会失效。傻瓜教程如下:1.如果没有GitHub账号,先注册一个。2.打开Vercel网站,用你的github账号登录:3.部署网易云API打开网易CloudMusicApi项目仓库,点击右上角的【Fork】按钮:这会将项目复制到你的名字下:然后打开Vercel网站,点击右上角的【新建项目】按钮创建一个新项目:然后在左侧的项目列表中找到你fork出来的NeteaseCloudMusicApi项目。项目太多不好找,也可以直接搜索:点击【导入】按钮导入,然后配置也可以不用修改,直接点击【部署】按钮部署:等待部署完成,点击左侧预览区,项目会打开,复制新打开页面的地址即可:4.部署YesPlayMusic项目界面服务部署完成,接下来就可以部署YesPlayMusic项目了完成后,步骤同部署界面,但是fork之后需要:点击仓库中的【添加文件】,选择【新建文件】,输入【vercel.json】,复制粘贴以下内容进入文件,将https://your-netease-api.exam...替换成你刚刚部署的网易云API的地址:{"rewrites":[{"source":"/api/:match*","destination":"https://your-netease-api.example.com/:match*"}]}接下来打开Vercel,步骤是和之前一样,不同的是最后一步需要修改一点配置:点击【环境变量】,填写NameVUE_APP_NETEASE_API_URL,Value为/api,点击【添加】。最后点击【Deploy】部署到Vercel。默认生成的域名是Vercel的子域名https://xxx.vercel.app。如果你有自己的域名,也可以绑定到自己的。点击项目详情页面的【设置】按钮:然后点击左侧的【域名】按钮,在右侧输入你要绑定的域名,点击【添加】:接下来,到服务商那里就行了你购买了域名并配置了CNAME映射:回到Vercel页面,会自动检测是否映射成功,最后等待生成证书,然后我们就可以通过自己的域名访问了:这个本文到此结束~