{"id":21320100,"url":"https://github.com/xieyezi/vuemusic","last_synced_at":"2025-10-12T19:08:43.535Z","repository":{"id":39563227,"uuid":"155355835","full_name":"xieyezi/vueMusic","owner":"xieyezi","description":"vue做的web音乐App","archived":false,"fork":false,"pushed_at":"2022-12-30T01:31:43.000Z","size":12137,"stargazers_count":69,"open_issues_count":23,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-04T23:49:07.014Z","etag":null,"topics":["axios","es6","javascript","music-player","vue","vue-player","vue-router","vuemusic","vuex","webapp"],"latest_commit_sha":null,"homepage":"http://xieyezi.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xieyezi.png","metadata":{"files":{"readme":"README-EN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-30T09:11:20.000Z","updated_at":"2024-10-29T06:30:08.000Z","dependencies_parsed_at":"2023-01-31T10:15:38.355Z","dependency_job_id":null,"html_url":"https://github.com/xieyezi/vueMusic","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/xieyezi/vueMusic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieyezi%2FvueMusic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieyezi%2FvueMusic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieyezi%2FvueMusic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieyezi%2FvueMusic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xieyezi","download_url":"https://codeload.github.com/xieyezi/vueMusic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xieyezi%2FvueMusic/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264939503,"owners_count":23686206,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","es6","javascript","music-player","vue","vue-player","vue-router","vuemusic","vuex","webapp"],"created_at":"2024-11-21T19:45:09.371Z","updated_at":"2025-10-12T19:08:38.517Z","avatar_url":"https://github.com/xieyezi.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"Language: English | [中文简体](https://github.com/xieyezi/vueMusic)\n\n\u003ch1 align=\"center\"\u003eMoment music Web APP\u003c/h1\u003e\n\n \u003cbr /\u003e\n \u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/-vue-green\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/npm-v6.10.3-orange\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/build-passing-brightgreen\"/\u003e\n\u003c/div\u003e \n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003e The API comes from [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi), I would like to thank those who helped me in the process of doing this project.\n\n\u003e \u003cbr /\u003e \u003cbr /\u003e\n\u003e Preview address: http://xieyezi.com (please use the mobile phone debugging mode of the browser to view)\n\n\u003e For mobile phone, please scan the QR code below:\n\n![时刻音乐二维码.png](https://cdn.xieyezi.com/%E9%9F%B3%E4%B9%90%E4%BA%8C%E7%BB%B4%E7%A0%81.png)\n\n### Original intention\n\nIt has been almost a year since I contacted Vue for 18 years. I wanted to make my own music app as a sophomore in college, because I like music very much, plus I am still a NetEase cloud musician 👉 [写夜子](https://music.163.com/#/artist?id=12478216), for this I learned `Android`, but I was too helpless, but I learned poorly, so I could n’t do it in the end. Plus I thought that only doing the `Android` version can not achieve cross-platform, so later began to consider using the front-end to achieve.\n\n### Features\n\n| Features                 | Description                                                    |\n| ------------------------ | -------------------------------------------------------------- |\n| Home page recommendation | Home page header map, the following is a recommended song list |\n| Playlist details         | Click on the playlist or singer to enter the playlist details  |\n| Singer selection         | Various types of singer selection                              |\n| Leaderboards             | Various Leaderboards                                           |\n| Recently Listened        | Just click to listen and join \"Recently Listened\"              |\n| My Favorites             | Click \"Heart\" in the playback interface to add \"My Favorites\"  |\n| Theme Skin Change        | Skin Change Function                                           |\n| Song mode switching      | Random play, single loop, list loop                            |\n| Search                   | Support singer and song name search                            |\n\n### Preview\n\n \u003cbr /\u003e\n\u003cdiv text=\"center\"\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/L27FlTkz8wQSyZh.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/aIr1wLHx8FXPc24.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/ZXJoTAb3FP76IkQ.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/QvVWMgr3CPZ6plU.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/9EpIrjS3JTm1X7Q.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/3I2iwyRm5eLarFV.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/e2cMpFDqyNlaGZV.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/aWtRoi5e3F71VCz.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/KPzdhc8aqRZ6U2A.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/tvK2QbY6jFBgdpn.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/bl75R2I8oV1WAuF.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/Stq9bUMniLIGaAs.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/yBN3rcoA4GSq5Fu.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/MdztuheB1LHSDPb.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/a6Iw9RKoQgjqxHc.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/6XRvDcTba4LKghF.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/pXiwL6QNErdbyoh.png\"/\u003e\n \u003cimg width=\"48%\" src=\"https://i.loli.net/2019/08/26/3UAKDasZjfVM7yQ.png\"/\u003e\n\u003c/div\u003e \n \u003cbr /\u003e\n\n### Construct\n\nThis project started in December 2018, and it was only completed in May this year. The main structure is as follows:\n\n\u003cimg src=\"https://i.loli.net/2019/08/26/r1hvlGK4Db87eZ9.jpg\"/\u003e\n\n| Language / Platform | Description                                          |\n| ------------------- | ---------------------------------------------------- |\n| vue                 | vue.js complete the front-end functional interaction |\n| vue-router          | Responsible for routing                              |\n| vuex                | State Management                                     |\n| localstorage        | Song cache and theme information cache               |\n| webpack             | Project Packing                                      |\n| rollup              | module packaging                                     |\n| ES6                 | Main Syntax                                          |\n| docker              | Deploy with docker-compose                           |\n| Alibaba Cloud       | Alibaba Cloud server is Linux                        |\n\n### Configuration file\n\n```js\nexport const playMode = {\n  sequence: 0, //顺序播放\n  loop: 1, //单曲循环\n  random: 2, //随机播放\n}\nexport const themeNumber = {\n  pink: 0, //桃花粉\n  cyan: 1, //绿松青\n  violet: 2, //丁香紫\n}\n```\n\n### Use shuffle function to generate random playlist\n\n```js\n//洗牌函数,打乱歌曲顺序\nexport function shuffle(arr) {\n  let _arr = arr.slice()\n  //保留arr,制作一个副本\n  for (let i = 0; i \u003c _arr.length; i++) {\n    let j = getRandomInt(0, i)\n    let temp = _arr[i]\n    _arr[i] = _arr[j]\n    _arr[j] = temp\n  }\n  return _arr\n}\n```\n\n### debounce\n\n```\nexport function debounce(func, delay) {\n    let timer;\n    return function (...args) {\n        if (timer) {\n            clearTimeout(timer);\n        }\n        timer = setTimeout(() =\u003e {\n            func.apply(this, args);\n        }, delay)\n    }\n}\n```\n\n### docker\n\nThis project is deployed with one-click docker-compose, the front end uses nginx as the container, and the back end uses node.js. By configuring nginx.conf, the front end requests a reverse proxy to the background.\n\n```docker\nversion: '3'\nservices:\n  music-web:\n    container_name: 'music-web-container'  #容器名称\n    image: nginx  #指定镜像\n    restart: always\n    ports:\n      - 80:80\n    volumes:\n      - ./nginx.conf:/etc/nginx/nginx.conf  #挂载nginx配置\n      - ./dist:/usr/share/nginx/html/    #挂载n项目\n    depends_on:\n      - music-server\n  music-server:\n    container_name: 'music-server-container'\n    build: ./server  #根据server目录下面的Dockerfile构建镜像\n    restart: always\n    expose:\n      - 3000\n```\n\nnginx.conf:\n\n```nginx\n#user  nobody;\nworker_processes  1;\nevents {\n    worker_connections  1024;\n}\n\n\nhttp {\n    include       mime.types;\n    default_type  application/octet-stream;\n    sendfile        on;\n    #tcp_nopush     on;\n\n    #keepalive_timeout  0;\n    keepalive_timeout  65;\n\n    #gzip  on;\n\tgzip on;\n    gzip_min_length  5k;\n    gzip_buffers     4 16k;\n    #gzip_http_version 1.0;\n    gzip_comp_level 3;\n    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;\n    gzip_vary on;\n\n    server {\n        listen  80;\n\t\tserver_name  www.xieyezi.com;\n\n\t\t#音乐app项目\n\t\tlocation / {\n\t\t index index.html index.htm;   #添加属性。\n         root /usr/share/nginx/html;   #站点目录\n\t\t}\n\t\t#音乐app项目设置代理转发\n        location /api/ {\n          proxy_pass  http://music-server:3000/;\n        }\n\n        error_page   500 502 503 504  /50x.html;\n        location = /50x.html {\n             root   /usr/share/nginx/html;\n        }\n\n    }\n\n}\n```\n\n### Start\n\n1.  Clone : `git clone https://github.com/xieyezi/myMusic.git`\n2.  Install dependencies: `cd myMusic \u0026\u0026 npm install`\n3.  run: `npm run serve` 或者 `npm run start`\n4.  Enter the background service catalog: `cd server`\n5.  Install dependencies: `npm install`\n6.  run: `node app.js`\n\n### Questions\n\n[Threre](https://github.com/xieyezi/myMusic/issues)\n\n### Open source certificate\n\n```\nMIT License\n\nCopyright (c) 2018-present xieyezi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieyezi%2Fvuemusic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxieyezi%2Fvuemusic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxieyezi%2Fvuemusic/lists"}