Rat's

mmPlayer:一款基于Vue的自适应Web在线音乐播放器
说明:一两年前博主曾分享过一个美观的在线音乐播放器MKOnlineMusicPlayer→传送门,不过作者早已停止...
扫描右侧二维码阅读全文
27
2019/04

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即可,打不开的话就检查下防火墙。

Vultr注册就送$50,可开日本/新加坡等机房,【点击注册】。
最后修改:2019 年 04 月 27 日 10 : 12 PM

发表评论

33 条评论

  1. 夜宵

    大佬,有其他web版的音乐服务器推荐么,就是能扫描本地音乐文件的

    1. Rat's
      @夜宵

      这个我也在找,找到就发出来

  2. yusssss

    然而无版权的音乐似乎无法播放?

    1. Rat's
      @yusssss

      对,无版权是不行的。

  3. 路人甲

    missing script: build

    npm ERR! A complete log of this run can be found in:
    npm ERR! /root/.npm/_logs/2019-08-16T20_31_36_501Z-debug.log
    我弃疗了 npm install从来没成功过

    1. Rat's
      @路人甲

      是在NeteaseCloudMusicApi目录安装的么?或者给详细日志我看看

  4. 樱花风誓

    请问大佬,我在安装好依赖后进入开发者运行状态发生报错
    INFO Starting development server...
    ERROR TypeError: Cannot convert undefined or null to object
    TypeError: Cannot convert undefined or null to object

    at Function.assign (<anonymous>) at config.plugin.tap.args (/root/mmPlayer/vue.config.js:19:14) at Object.tap (/root/mmPlayer/node_modules/webpack-chain/src/Plugin.js:24:24) at chainWebpack (/root/mmPlayer/vue.config.js:18:27) at webpackChainFns.forEach.fn (/root/mmPlayer/node_modules/@vue/cli-service/lib/Service.js:227:40) at Array.forEach (<anonymous>) at Service.resolveChainableWebpackConfig (/root/mmPlayer/node_modules/@vue/cli-service/lib/Service.js:227:26) at Service.resolveWebpackConfig (/root/mmPlayer/node_modules/@vue/cli-service/lib/Service.js:231:48) at PluginAPI.resolveWebpackConfig (/root/mmPlayer/node_modules/@vue/cli-service/lib/PluginAPI.js:138:25) at serve (/root/mmPlayer/node_modules/@vue/cli-service/lib/commands/serve.js:48:31) at Service.run (/root/mmPlayer/node_modules/@vue/cli-service/lib/Service.js:221:12) at Object.<anonymous> (/root/mmPlayer/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! vue-mmplayer@1.5.6 serve: vue-cli-service serve
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the vue-mmplayer@1.5.6 serve script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! /root/.npm/_logs/2019-06-15T08_00_09_732Z-debug.log

    不知道怎么解决,一脸懵。
    lnpm环境,阿里香港服务器,centos7 单核2G

    1. Rat's
      @樱花风誓

      看了下,好像是有点小问题,你先用这个历史版本试试,地址:https://github.com/maomao1996/Vue-mmPlayer/tree/cfd0d446e9d1f297260bc43f3726fc14072e9c80。

  5. kuku

    这个是不是国外服务器没法用呀。搭建了木得歌,后端正常

    1. Rat's
      @kuku

      有用,我就是国外服务器测试的

      1. kuku
        @Rat's

        把localhost:3000改成本机公网ip就行了,按道理localhost也行的呀

        1. Rat's
          @kuku

          你外网访问的时候,有些资源加载的还是localhost

  6. mit

    想问一下 开启https那里应该怎么操作?是需要在nginx或者caddy中反代这个本地端口然后将反代后的地址填进config.js里是吗?

    1. Rat's
      @mit

      将反代后端api的https域名地址填进去就行了

  7. mlsha

    启用https后,歌曲的封面图片引用还是http的,楼主知道如何修改吗?

    1. Rat's
      @mlsha

      这个我还没注意,你说的http的ip地址还是其它链接?

      1. mlsha
        @Rat's

        就是说前段和后端都开启https后,点击听歌后,前端页面的背景图会换成歌曲的封面图,但是歌曲的封面图引用的地址是网易的http链接而不是https的

        1. Rat's
          @mlsha

          查看这个问题就可以解决,https://github.com/maomao1996/Vue-mmPlayer/issues/10

        2. mit
          @mlsha

          这个问题在项目里的issue有解决方法

  8. LsyIuAn
    该评论仅登录用户及评论双方可见
    1. Rat's
      @LsyIuAn

      nodejs安装了没?

      1. LsyIuAn
        @Rat's
        该评论仅登录用户及评论双方可见
        1. Rat's
          @LsyIuAn

          应该不会出错。

          1. LsyIuAn
            @Rat's
            该评论仅登录用户及评论双方可见
            1. Rat's
              @LsyIuAn

              你这些命令靠猜的吧,重装吧,挨着运行命令就没错了

              1. LsyIuAn
                @Rat's
                该评论仅登录用户及评论双方可见
  9. zturns

    每次来博主的网站都会学到新的东西。

  10. 猪蹄君

    优秀

  11. 搬瓦工

    交换链接吗

    1. Rat's
      @搬瓦工

      抱歉,暂时不换了

  12. neo

    好想和博主一样优秀

    1. Rat's
      @neo

      过奖,我很水的,你可以自己搞个博客,多发文章就行了

  13. 元霜丶

    博主真勤奋,点赞支持。

xxfseo.com