Collaborative Piano Demo with Ably

This project is a demo of how Ably's low latency, guaranteed Quality of Service (QoS), and presence features can be used to create a collaborative piano that allows multiple users to play together in real-time.

Technologies Used

The following technologies were used to build this demo:

• Ably: A realtime messaging platform that provides low-latency pub/sub messaging, presence, and QoS guarantees.
• Next.js 13: A server-side rendering (SSR) React framework that allows for easy creation of complex web applications.
• Auth0: A platform that provides secure authentication and authorization services for web applications.
• WebAudio API: A high-level JavaScript API for processing and synthesizing audio in web applications.
• ToneJS: A JavaScript library for creating interactive music in the browser.
• Canvas2D: A 2D drawing API for HTML5 canvas that allows for the creation of graphical elements and animations.

Getting Started

To run this project locally, follow these steps:

1. Clone the repository: git clone https://github.com/NickLittman/ably-piano.git
2. Install dependencies: pnpm install
3. Create a free account on Ably and get your API key.
4. Create a free account on Auth0 and get your client ID and secret.
5. Create a .env.local file in the root of your project with the following variables:
AUTH0_SCOPE='openid profile email read:shows' ABLY_AUTH_TOKEN=<your-ably-api-key>
AUTH0_CLIENT_SECRET=<your-auth0-client-secret>
AUTH0_DOMAIN=<your-auth0-domain>
NEXT_PUBLIC_DOMAIN=<your-auth0-domain>
NEXT_PUBLIC_CLIENT_ID=<your-auth0-client-id>
NEXT_PUBLIC_AUDIENCE=<your-auth0-audience>
NEXT_PUBLIC_APP_ORIGIN=<your-configured-auth0-app-origin>

6. Run the development server: npm run dev
7. Open your browser and go to http://localhost:3000

License

This project is licensed under the MIT License. See the LICENSE file for more information.