Play your music files stored in Google Drive, https://dandalpiaz.github.io/drive-music-player/
The aim of this project is to create a browser-based application that can play music files from a user's Google Drive storage. To keep development simple and easy-to-maintain, emphasis is put on native browser features, for example:
- Native
<audio>element - styled on a per-browser basis to blend in with the design - Native
<details>&<summary>elements - to nagivate a user's nested folders, recursively - Vanilla JavaScript - for any custom JS needed. More advanced/mobile features could be added using React Native or Cordova, but that's outside the initial scope of the project.
- Go to the Google Cloud Console, click the project selection drop-down in the top navigation and start a 'New Project'.
- Give the project a name, create the project, and 'Select' the project.
- Click the link for 'APIs & Services' and the click 'Enabled APIs and Services'. Search for 'Google Drive API' and enable that API.
- Click the 'Create Credentials' button, make sure the Drive API is select, choose 'User data', click 'Next'.
- Give the app a name, add a support and developer email address and click 'Save and Continue'.
- Click the 'Add or Remove Scopes' button, search for 'Drive' and add the 'drive.readonly' scope. Click 'Save and Continue'.
- Choose 'Web application' for the OAuth Client ID type. Add "http://localhost" and your domain as 'Authorized JavaScript origins'.
- Add the 'Client ID' in the
scripts.jsfile in this repository. Click 'Done'. - Click the 'Quotas' tab. Update the 'Queries per 100 seconds per user' to be 100.
- In 'APIs & Services' click 'OAuth consent screen' in the sidebar and add 'Test users'. This is also where the app can be published.
Run python3 -m http.server to start a local web server.
npx playwright install
npx playwright wk http://localhost:8000
- Better focus indicators (contrast)
- 100% width? Fixed header?
- Store access token? Get new token when close to expiration? Based on user action?
- Custom domain (cloudflare, update repo, GH, g-app), analytics, authed url test
- Add legal links
- Styles for native audio player in Safari
- Publish g-app and request verification, post
- Bars bug (click multiple tracks)
- HTML audio player? (see audio.html)
- Could grab artworks? Add art loop in api query
- Error handling for rate limits
- Mobile playthrough, lockscreen controls ?
- Gapless playback using two audio elements?
- Get audio files in chunks (byte range) for quicker start?
- Start caching api content, if needed