如何搭建自己的在线音乐播放器Demo
如何搭建自己的在线音乐播放器Demo
现在的音乐软件界面和布局越来越花哨,越来越偏向于社交,但是许多人真的只是想安安静静地欣赏一首音乐,不想看一堆广告和评论,而这就是自建在线音乐服务的意义,无人打扰,无广告,回归初心。 另外,如果你没有自己的服务器也没有关系,直接使用现成搭好的就行 mmPlayer 作者搭建的在线播放器Demo: https://netease-music.fe-mm.com/ 我自己搭建的在线播放器服务: https://music.hash070.top/ 上面就是本次我们要搭建的在线播放器的示例,没有服务器或懒得自己搭建的小伙伴们把这个网站直接收藏使用就可以了,下面是服务器搭建流程(本教程基于宝塔面板 宝塔yyds): 准备工作 搭建在线音乐播放器所用到的服务 后端音乐服务接口NeteaseCloudMusicApi GitHub链接: https://github.com/Binaryify/NeteaseCloudMusicApi 前端mmPlayer GitHub链接: https://github.com/maomao1996/Vue-mmPlayer 搭建后端服务 将后端服务克隆下来并执行安装 #我这边将这些文件放在了/www/wwwroot/文件夹下 #进入/www/wwwroot/文件夹 cd /www/wwwroot/ #克隆音乐后端服务项目到该文件夹(如果由于网络原因下载失败,也可以直接点击上面的链接去github下载压缩包并解压上传到服务器) git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git #进入克隆下来目录 cd NeteaseCloudMusicApi/ #执行安装命令 npm install #如果提示npm命令不存在,则您应当手动安装nodejs和npm #安装命令(CentOS): yum install nodejs yum install npm #如果执行npm命令提示链接错误等信息,则您应当尝试卸载并重新安装nodejs和npm #卸载命令(CentOS) yum remove nodejs yum remove npm 在宝塔面板的软件商店中下载PM2管理器 进入PM2管理器小工具界面,填写信息 #启动文件填写 /www/wwwroot/NeteaseCloudMusicApi/app.js #运行目录填写 /www/wwwroot/NeteaseCloudMusicApi 填写完成后点击提交可以看到项目运行成功 至此,后端服务搭建成功。接下来进行构建和部署前端页面 构建和部署前端页面 将前端项目使用git clone命令或者自行下载并上传到服务器上 #同样的,进入/www/wwwroot/文件夹 cd /www/wwwroot/ #克隆项目 git clone https://github.com/maomao1996/Vue-mmPlayer.git 进入项目目录,安装依赖并打包 #进入项目目录 cd Vue-mmPlayer #安装依赖 npm install #编译打包 npm run build 执行编译打包命令之后,在该项目目录中会出现一个dict文件夹,里面就是生成的网站了 这些文件先放着,去创建一个网站 如图所示,我用的是阿里云dns,选择添加域名解析,到服务器ip 等待解析生效,当访问域名时能够看到站点创建成功的页面后进行下一步操作 站点创建成功页面 将上面编译生成的dist目录下的全部文件,覆盖到该网站的根目录下,就算大功告成了 这里可以查看网站根目录 至此在线音乐播放器基本就算是部署完成了,直接访问对应的域名就可以使用了。 下面是进阶教程,就不写太详细了,建议有基础的继续看下去,教大家如何部署SSL证书,开启https访问。 为该网站部署SSL证书并开启HTTPS 如果你没有或没听说过SSL证书,那么首先要去申请SSL证书 好消息是宝塔有傻瓜式的脚本来一键申请SSL证书,按着提示一步一步跟着做就行了,非常简单 建议申请一个通配符证书,即所有的二级域名都能使用这个证书,省去很多麻烦 至于更详细的API key怎么获得的我就暂时不写了,大致按着这个图配置就行 给后端接口套一个反向代理 由于前端要开启Https,后端的接口也要开Https,否则会出错 我的思路是创建一个站点并配置好SSL证书,专门用来代理后端音乐接口 如下图所示 img 修改前端的接口配置文件并重新编译部署网站 找到前端项目目录里面的vue.conf.js文件,将接口地址改为上面的网站地址 img 然后重新执行一遍编译操作,把文件复制黏贴到播放器网站的根目录即可 img #编译命令(在vue-netease-music目录下执行) npm run build 还有一点点小问题 当这个播放器的网页失去焦点时,标题会变成一个令人感到不适的句子,我知道这里作者只是想开个玩笑,但这个地方确实不太好 网页失去焦点后的标题 网页得到焦点时的标题,可以看出作者并没有主观上的恶意 所以就想着手动修改一下这个地方 思路,首先控制这个的一定是一个JavaScript脚本,使用Linux系统的Find命令,查找该网站目录下以js为后缀名,内容中含有关键词“死鬼”的文件,命令如下 find /www/wwwroot/music.hash070.top -name "*.js" | xargs grep "死鬼" 执行完后,命令行会返回文件的名称和包含该关键词的行 相关的文件在网站的js目录下的app.7b9843e2.js里面 进入文件再使用查找替换,换成自己想要的词就行了 好的,教程至此结束,祝大家用的愉快
 2022-9-6
宝塔面板部署 Vue-mmPlayer
宝塔面板部署 Vue-mmPlayer
宝塔面板部署 Vue-mmPlayer 部署后台API服务 下载和上传 git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git 将下载好的NeteaseCloudMusicApi文件直接上传到宝塔面板的/www/wwwroot目录下 启动服务 安装 PM2 管理器(软件管理 - 运行环境) 启动服务 点击PM2 管理器 选择刚刚上传的NeteaseCloudMusicApi项目的目录 输入app.js和项目名称NeteaseCloudMusicApi 点击添加 放行端口:安全,添加api服务的默认端口3000 绑定域名并设置HTTPS 启动服务后映射,输入当前服务需要绑定的域名(无需直接跳过步骤) 侧边栏目网站,找到最简单的点击边栏设置——点击SSL 如果宝塔有进行实名认证可以选择宝塔SSL,未实名可以去阿里云申请SSL证书(教程使用阿里云SSL证书,申请地址选择免费版(个人)DV) 申请好阿里云SSL证书后,下载证书(选择其他) 将下载后的解压,去宝塔分别重新点击密钥(KEY)和保存的文件证书(PEM格式) 2 3 4 使用宝塔SSL 5 部署 Vue-mmPlayer 服务 下载和编译 git clone https://github.com/maomao1996/Vue-mmPlayer.git 进入项目目录 cd Vue-mmPlayer 安装依赖 npm install 将 .env 文件的 VUE_APP_BASE_API_URL 地址修改为上一步 API 服务的地址 编译打包 npm run build 将打包好的NeteaseCloudMusicApi文件直接上传到宝塔面板的/www/wwwroot目录下 上传到宝塔面板 6 点击侧边栏网站- 添加站点,然后输入为 Vue-mmPlayer 准备好域名 点击刚创建的网站根目录,将直接打包打包dist当前文件夹中的所有文件上传目录 最后可以根据需要进行HTTPS设置
 2022-9-6
52音乐网站搭建
52音乐网站搭建
mmPlayer 模仿 QQ 音乐网页版界面,采用 flexbox 和 position 布局; mmPlayer 虽然是响应式,但主要以 PC 端为主,移动端只做相应适配; 只做主流浏览器兼容(对 IE 说拜拜,想想以前做项目还要兼容 IE7 ,都是泪啊!!!) api:一个开源的网易云音乐 NodeJS 版 API(有 api 才有动力写!!!) 在线演示地址 React 移动端版本(高仿网易云音乐) 交流 QQ 群:529940193 本群不解答部署相关问题,如有部署问题请看关于项目线上部署 本播放器由 maomao1996 开发,您可以随意修改、使用、转载。但使用或转载时请务必保留出处!!! 免责声明 本站音频文件来自各网站接口,本站不会修改任何音频文件 音频版权来自各网站,本站只提供数据查询服务,不提供任何音频存储和贩卖服务 本项目仅为前端练手项目,请勿用作商业用途,请勿通过本项目下载盗版歌曲资源,否则后果自负! 安装与使用 检查 node 版本 查看 node 版本,确保 node 版本高于 12 版本 node -v Node.js 中文网 mmPlayer 下载 mmPlayer git clone https://github.com/maomao1996/Vue-mmPlayer 进入 mmPlayer 播放器目录 cd Vue-mmPlayer 安装依赖 推荐使用 yarn npm install 本地运行 mmPlayer npm run serve 编译打包 npm run build 后台 api 服务(本地开发) 网易云音乐 NodeJS 版 API 下载 NeteaseCloudMusicApi git clone --depth=1 https://github.com/Binaryify/NeteaseCloudMusicApi 进入 NeteaseCloudMusicApi 后台服务目录 cd NeteaseCloudMusicApi 安装依赖 npm install 运行后台 api 服务 访问 http://localhost:3000 node app.js 注意点 运行 mmPlayer 后无法获取音乐请检查后台 api 服务是否启动(即控制台请求报 404) 线上部署不是直接将整个项目丢到服务器,再去运行 npm run serve 命令 项目打包前 VUE_APP_BASE_API_URL 必须改后台 api 服务地址为线上地址,不能是本地地址 关于项目线上部署 最近有不少小伙伴部署出了问题,我在这说明下 后台 api 服务线上部署 你需要将 NeteaseCloudMusicApi 下载 然后将下载的文件上传至服务器 再通过 pm2 去启动服务(pm2 安装和相关命令网上有很多,这里不再赘述) 最后通过服务器 ip + 端口号访问验证 api 服务是否启动成功 mmPlayer 线上部署 首先要注意的是 先将 .env 文件的 VUE_APP_BASE_API_URL 修改成上一步启动的后台 api 服务地址(服务器 ip + 端口号或者你绑定的域名) 然后先在本地运行 npm run build 命令,会打包在生成一个 dist 文件 最后将打包的 dist 文件上传到你的网站服务器目录即可 其他:在宝塔面板部署 mmPlayer(不喜欢写文,可能有点烂不要介意哈) 最后:本人已和谷歌、百度达成合作了,如果还有啥不懂的,以后可以直接谷歌、百度 技术栈 Vue Cli(Vue 脚手架工具) Vue(核心框架) Vue Router(页面路由) Vuex(状态管理) ES 6 / 7 (JavaScript 语言的下一代标准) Less(CSS 预处理器) Axios(网络请求) FastClick(解决移动端 300ms 点击延迟) 项目结构目录图(使用 tree 生成) 展开查看 功能 播放器 快捷键操作 歌词滚动 正在播放 排行榜 歌单详情 搜索 播放历史 查看评论 同步网易云歌单 界面欣赏 PC 端界面自我感觉还行, 就是移动端界面总觉得怪怪的,奈何审美有限,所以又去整了高仿网易云的 React 版本(如果小哥哥、小姐姐们有好看的界面,欢迎交流哈) 点击查看 更新说明 V1.8.2(2021.08.23) 移除我的歌单喜欢的音乐 优化请求错误处理 查看更多 其他说明 个人练手项目(本想先做移动端的,但是发现有很多人都做过,就稍微标新立异做个 PC 端) 如果您喜欢该作品,您可以点右上角 "Star" "Fork" 表示支持 谢谢! 后续:移动端版本、其他作品 如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 鸣谢 特别感谢 JetBrains 为开源项目提供免费的 WebStorm 授权 License MIT
 2022-9-6
1
1
 2022-9-6
上海游玩攻略之南汇新城海滩
上海游玩攻略之南汇新城海滩
大家好!我是吃人陈,今天写一下上海游玩攻略之南汇新城海滩。 首先我们需要一个能查询潮汐的app或者百度上海潮汐表(我下载的是:潮汐快查APP(主要是没有广告)) 点进去查询 一.出发前准备 如果你捞鱼,抓螃蟹等:防水手机套带一个,小桶,铲子,小网(捞鱼用) 必需品:防水包带一个,水,吃的,拖鞋,创可贴,碘酒棉签 女生注意:防晒霜(防晒喷雾等) 注意:,如果回去晚记得带个外套,晚上海上风挺冷的! 二.出行路线 地铁16号线坐到底(滴水湖站下,2号口出),然后有双人小车可以先逛逛滴水湖(虽然没有什么好看的) 打车到:南汇新城海滩(差不多7公里) 如果是驾车:导航到南汇新城海滩(里面和外面都有停车的) 建议到达时间不宜过早(5点左右刚好) 三.到达后游玩 南汇新城海滩有街边摊可以买吃的。 1.鞋子可以放在海滩边上,不放心可以装包里(前提是装的下) 2.进入海滩先别穿拖鞋(你会谢我的),刚下海地方很粘鞋子,到达中段沙滩就很硬了,可以穿拖鞋了 接下来说说我去的行程: 因为我是突然想去的,所以没做什么准备就出发了。 大概是两点左右出发的,午饭也没怎么吃,到达滴水湖差不多3点半了,然后随便找了家凉皮及冰粉吃了 再然后在滴水湖逛了逛 打车去的南汇新城海滩 随后买了拖鞋,没用的上 不过风景和海风还是不错的 总计花费: 来回地铁:7+7=14 凉皮及冰粉:15+20=35 打车来回:18.53+27.74=46.27=47 买了根烤肠:5 拖鞋:15 回来吃了肯德基:42 14+35+47+5+15+42=158 158元
 2022-8-29
万晨导航系统:后台密码忘记重置教程
万晨导航系统:后台密码忘记重置教程
1、后台有“忘记密码”按钮 2、通过数据库重置 (1)用phpmyadmin 打开数据库,找到表 admin_user (2)password的值改成:E10ADC3949BA59ABBE56E057F20F883E (3)打开你网站后台输入你的账号和新的密码 123456 直接登录即可! tips:你学废了吗?
 2022-6-19
万晨导航系统:覆盖更新
万晨导航系统:覆盖更新
宝塔 程序覆盖更新视频教程 覆盖更新无需导入sql语句!!! 记得备份wc-navs目录数据 1、备份wc-navs目录数据 2、删除wc-navs.war 3、上传或远程下载最新版压缩包 4、解压.zip包 5、打开网站,等待。。。 6、不会的加qq:1820487831 https://oss.wc-os.com/linux_1_update.mp4
 2022-6-19
万晨导航系统:修改数据库
万晨导航系统:修改数据库
导航程序->Linux宝塔修改数据库账号密码 Tomcat 8 路径 /www/server/tomcat8/webapps/wc-navs/WEB-INF/classes下 Tomcat 9 路径 /www/server/tomcat9/webapps/wc-navs/WEB-INF/classes下 application-mysql.properties 文件 application-mysql.properties文件 localhost:3306/wc-navs localhost对应你的数据库地址,默认是不变的。 3306是对应数据库端口,默认是不变的 wc-navs是对应你数据库名的。 spring.datasource.username: wc-navs 后跟你的数据库账号 spring.datasource.password: wc-navs. 后跟你的数据库密码 按照格式修改就可以了,然后保存。 重启tomcat 8/9生效 不建议您数据库权限为所有人可见,设置成本机可见就可以了。
 2022-6-19
万晨导航系统:宝塔迁移教学(插件迁移)
万晨导航系统:宝塔迁移教学(插件迁移)
本期给大家带来使用宝塔商店的”宝塔一键迁移API版本“插件。 在老宝塔,安装上图中的插件,然后使用插件,一键迁移站点数据,具体教程,宝塔有介绍,这里不说多。 我这里主要介绍,迁移过去之后,该做哪些事情。 网站主要就需要备份两个东西: (1)static目录下的upload目录,这里是存放本地图片用的,如果你使用的是oss,那么将不用管这个。 (2)网站的数据库,这个必须要备份!不然你操作不当丢失的话,那是很痛苦的。 找到目录下:/www/server/tomcat8/webapps/wc-navs/WEB-INF/classes/static 下的upload目录,看一下大小是否不缺失。 将upload剪切,或者复制到其他目录,或者下载下来,切记不要在tomcat8目录下。 然后将/www/server/tomcat8/webapps/目录下的网站包给删除掉,对,你没有听错,直接删除。 然后将官网最新的包给放进去即可。 然后正常的安装步骤。 数据库类型要选择已有数据! 然后其他的就跟正式版的一样安装步骤。 redis一定要先安装。不然就会出现如下错误!!!! 什么?你竟然问redis怎么装??? 。。。。料到了,没事,你点击这个链接进去即可。 https://www.wc-os.com/apps/bbs/thread/7.html 什么?不会重启tomcat? 然后在将你刚才剪切/复制/下的的upload目录,在放入你刚才新安装的相同位置下即可。 这样你的图片就回来了! 总结:迁移就是迁移本地图片(static下的upload目录)和迁移数据库,其他的均和全新安装一致!!!
 2022-6-19
万晨导航系统:链接目录
万晨导航系统:链接目录
链接目录: PC-web端: 首页: ( / ) https://navs.wc-os.com/ 网址-列表: ( /list/id.html ) https://navs.wc-os.com/list/139.html 网址-详情:( /html/id.html ) https://navs.wc-os.com/html/836.html 自定义收藏:( /custom_url.html ) https://navs.wc-os.com/custom_url.html 最近更新-全部:( /update.html ) https://navs.wc-os.com/update.html 最近更新-分类:( /update.html?id= ) https://navs.wc-os.com/update.html?id=6 最近更新-详情:( /update/id.html ) https://navs.wc-os.com/update/5245.html 在线工具:( /tools.html ) https://navs.wc-os.com/tools.html 新闻资讯-推荐:( /column/0.html ) https://navs.wc-os.com/column/0.html 新闻资讯-分类:( /column/id.html ) https://navs.wc-os.com/column/1.html 新闻资讯-详情:( /article/id.html ) https://navs.wc-os.com/article/1313.html 排行榜-实时当天:( /rank/1.html ) https://navs.wc-os.com/rank/1.html 排行榜-本月榜单:( /rank/2.html ) https://navs.wc-os.com/rank/2.html 排行榜-总榜巅峰:( /rank/3.html ) https://navs.wc-os.com/rank/3.html 自定义内页:( /page/id.html ) https://navs.wc-os.com/page/11.html 自助广告:( /about/buy.html ) https://navs.wc-os.com/about/buy.html 友链申请:( /about/link.html ) https://navs.wc-os.com/about/link.html 申请收录:( /about/send.html ) https://navs.wc-os.com/about/send.html 意见反馈:( /about/idea.html ) https://navs.wc-os.com/about/idea.html
 2022-6-19

Theme By Brief 陕ICP备17000448号

首页

分类

友链

登录