学习
实践
活动
工具
TVP
写文章
专栏首页用户8644135的专栏mmPlayer:一款基于Vue的自适应Web在线音乐播放器

mmPlayer:一款基于Vue的自适应Web在线音乐播放器

说明:一两年前博主曾分享过一个美观的在线音乐播放器MKOnlineMusicPlayer传送门,不过作者早已停止了维护,最近有小伙伴推荐了mmPlayer,一个使用Vue全家桶打造自适应Web音乐播放器,模仿QQ⾳乐⽹页版界⾯,主要以为PC端为主,移动端只做相应适配(未做歌词显⽰),现已实现播放器、歌词滚动、排⾏榜、搜索、播放历史、同步⽹易云歌单六⼤功能。

截图

功能

  • 播放器
  • 快捷键操作
  • 歌词滚动
  • 正在播放
  • 排行榜
  • 歌单详情
  • 搜索
  • 播放历史
  • 查看评论
  • 同步网易云歌单

安装

Github地址:https://github.com/maomao1996/Vue-mmPlayer

1、安装依赖

#Debian/Ubuntu系统
curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt install -y nodejs git screen 

#CentOS系统
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install nodejs git screen -y

2、运行播放器

git clone https://github.com/maomao1996/Vue-mmPlayer.git mmPlayer
cd mmPlayer
#安装依赖
npm install
#开发者运行
npm run serve

访问地址为ip:8080,不过这里是用来调试的,先放着不动,然后再把后端服务器搭建好。

为了避免出现不必要的问题,这里就不直接使用项目中的源码了,直接拉取最新的API

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
#安装依赖
npm install
#运行
node app.js

#或者后台运行
screen -dmS api node app.js

后端地址为ip:3000,如果想改其它端口,比如5555,启动命令为set PORT=5555 && node app.js

3、修改并打包 这里只说下常见的几个修改地方,比如标题、后端api地址修改什么的。

#修改后端api
路径src/config.js,修改const URL = 'http://ip:3000'

#修改标题和提示话语
路径src/App.vue和src/components/mm-header/mm-header.vue,自己找关键词自行修改吧

这里如果你想使用https访问该音乐播放器,那还需要使用https域名反代该api地址,然后将反代后的https域名填进去。

接下来再打开ip:8080查看修改效果,不过一般不在本地是用不了的,所以只看标题和提示啥的就行。

确定没啥问题了,就开始打包,使用Ctrl+C断开运行,使用命令:

npm run build

然后打包后的源码在dist文件夹,这时候就可以将文件夹里的源码丢到自己的网站根目录就可以直接用了,记得后端地址不要挂就行。

最后如果你只是想玩玩,那这里提供一个最快的运行方法,使用命令:

#进入打包好的文件夹
cd dist
#运行端口4567,可自行修改
python -m SimpleHTTPServer 4567

然后访问ip:4567即可,打不开的话就检查下防火墙。

本文转载自: https://www.moerats.com/archives/936/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 仿网易云在线音乐

    今天看到仿网易云的在线音乐播放器项目,各方面的讲解还蛮仔细,于是就尝试了部署了一下,这里做一个记录

    在水一方
  • Vue-CoreVideoPlayer 一款基于 vue.js 的轻量级、优秀的视频播放器组件

    Vue-CoreVideoPlayer的说明文档和sample都很完善,上手十分容易。

    前端实验室
  • 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布

    今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧! 线上地址体验

    马克社区
  • 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 今日正式发布

    今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!

    Vam的金豆之路
  • 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

    前端之所以有趣,就是每年有比较多新奇的插件和工具值得我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这...

    前端达人
  • 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)

    前端之所以有趣,就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这5...

    前端达人
  • MKOnlinePlayer在线音乐播放器

    MKOnlineMusicPlayer 是一款开源的基于 Meting 的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人网易云音乐播放列表同步等功...

    行云博客
  • 自适应在线音乐播放器 - 开源

    Github:https://github.com/mengkunsoft/MKOnlineMusicPlayer

    用户7293182
  • WEB音乐播放器源码

    原项目因为一些原因,被某音乐 DMCA通知,导致项目停止维护,后端文件也被删除了。

    XG.孤梦
  • 在线听歌房源码 - MKOnlineMusicPlayer V2.21

    Youngxj
  • 我用这 18 个神奇的库,美化了我的项目,真是亮瞎我的眼!

    github 地址:https://github.com/airbnb/lot...

    前端小智@大迁世界
  • 单点登录协议有哪些?CAS、OAuth、OIDC、SAML有何异同?

    单点登录实现中,系统之间的协议对接是非常重要的一环,一般涉及的标准协议类型有 CAS、OAuth、OpenID Connect、SAML,本文将对四种主流 SS...

    玉符IDaaS
  • WebRTC再升级,网易云信实现多场景实时音视频应用

    近年来,直播竞答、网络游戏直播等新的实时音视频通讯场景不断推陈出新,并成为引领互联网娱乐风向的弄潮儿。数据显示,2017年中国在线直播用户规模达到38亿,预计2...

    BestSDK
  • COS 音视频实践 | 数据工作流助你播放多清晰度视频

    ‍‍ 前言 你是否遇到过这样的场景:兴致勃勃地观看心爱的视频,正当到了激动人心的高潮部分,却突然因为网速过差被迫陷入“转圈圈”的人生以及社会的大思考中。又或者...

    云存储
  • 技术解码 | 玩转视频播放,自适应码流技术

    视频在线观看的用户体验是视频行业差异化的一个关键点,而自适应码流技术便是其中的关键技术。本周的技术解码就由楚雄老师带大家玩转视频播放,解码自适应码流技术. 随...

    腾讯云音视频
  • 躁!DJ 风格 Java 桌面音乐播放器

    HelloGitHub 推出的《讲解开源项目》系列,今天给大家带来一款开源 Java 版桌面 DJ 音乐播放器项目——XR3Player,它强大的功能和炫酷的展...

    HelloGitHub
  • 【云+社区年度征文】自适应码流加密+超级播放器播放最佳实践

    随着视频行业的快速发展,越来越多的视频内容需要保护。不论腾讯视频、优酷、爱奇艺等视频媒体平台播放的独播剧、版权电影,还是在线教育网站提供的教学视频,抑或游戏主播...

    clairehou
  • 13款用于Web的流行HTML5视频播放器

     点击上方“LiveVideoStack”关注我们 ▲扫描图中二维码或点击阅读原文▲ 了解音视频技术大会更多信息 ---- 翻译:Alex 技术审校:章琦 ...

    LiveVideoStack

扫码关注腾讯云开发者

领取腾讯云代金券