Skip to content
Vusic - Apple Music Web Player made with VueJS
Vue JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Update nodejs.yml Dec 27, 2019
example
public
queryResults added api response examples Dec 5, 2019
src change options menu design, set min-width for songs list on search re… Jan 22, 2020
.browserslistrc init Nov 26, 2019
.editorconfig init Nov 26, 2019
.eslintrc.js design changes Dec 5, 2019
.firebaserc firebase config Dec 16, 2019
.gitignore removed api key Dec 31, 2019
.prettierrc Changed sidebar style Dec 7, 2019
README.md changed images Jan 7, 2020
apiKeys.example.js added new api keys example Jan 1, 2020
babel.config.js implemented artist page , changed shuffle algorithm, changed album se… Dec 26, 2019
firebase.json firebase config Dec 16, 2019
package-lock.json dependency update Jan 1, 2020
package.json dependency update Jan 1, 2020
postcss.config.js init Nov 26, 2019
vue.config.js design changes Dec 5, 2019

README.md

Vusic - Apple Music Web Player

Made with Vue, Vuex , Vue Router, (Styled with SASS). Powered by Genius, Youtube and Apple MusicKitJS SDK

Features

Library

  • View all songs, albums, playlists in your library.
  • Add songs to your Library.
  • Search you library.

Apple Music

  • Browse currently popular songs.
  • Search Apple Music catalog.
  • Show recommendations by Apple (For You)
  • Browse Recently played , added and most frequently played items (heavy rotation)
  • like or dislike (rate) a song

Other features

  • Show music video for currently playing song (youtube)
  • Show lyrics for currently playing song

Screenshots

Album View

Library Artists

Playlist View

Music Video and Lyrics

Library Playlists

Options Menu

Queue Items

How to Build

Rename apiKeys.example.js to apiKeys.js and add all the necessary api keys

Api keys example

const keys = {
  appleMusic: {
    developerToken: 'Apple MusicKitJS API Key Goes Here',
    name: 'Vusic',
    build: 'ver1',
    version: 'ver1',
  },
  geniusAccessToken: 'Genius Access Token Goes Here',
  youtubeApiKey: 'Youtube Api Key Goes Here',
};

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Other Projects like this (inspiration for this project)

Musish

apple-music-webplayer by zachomedia

You can’t perform that action at this time.