Live crowd queue

Let the room choose what plays next.

Synesthesia is a real-time music queue where guests vote tracks up or down. The playlist reacts instantly, keeping the vibe democratic and alive.

Realtime backendVote-based orderingYouTube playback

Start a room

Kick off a session and share the code.

Join a room

Enter the room code to add songs and vote.

Create

Spin up a room in seconds. The host keeps playback on their device.

Vote

Guests add songs and vote to shape the vibe in real time.

Play

Queue order updates instantly so the next track is always crowd-approved.

Add to your project

Embed the Synesthesia widget in any website, app, or stream overlay with a single line of code.

Embed Widget

iframe

Drop this snippet into your HTML. The widget opens a lobby where users can create or join rooms — no room code needed in the embed itself.

<iframe
  src="https://yourdomain.com/embed"
  width="420"
  height="600"
  frameborder="0"
  allow="autoplay; encrypted-media"
  style="border-radius: 16px; border: none;"
></iframe>

To auto-join a specific room, append ?room=ABCD to the embed URL.

JavaScript API

fetch

Interact with rooms programmatically. Create rooms, add songs, and listen for queue updates via the Convex API.

import { ConvexHttpClient } from "convex/browser";
import { api } from "./convex/_generated/api";

const client = new ConvexHttpClient(
  process.env.NEXT_PUBLIC_CONVEX_URL
);

// Create a room
const { code } = await client.mutation(
  api.rooms.createRoom,
  { name: "My Room", hostUserId: "host_1", maxSongsPerUser: 5 }
);

// Add a song to the queue
await client.mutation(api.songs.addSong, {
  roomId,
  title: "Never Gonna Give You Up",
  providerId: "dQw4w9WgXcQ",
  provider: "youtube",
  addedBy: "user_123",
  addedByName: "Guest",
});

Quick Start

terminal

Self-host Synesthesia in under a minute. Clone, configure, and launch.

# Clone the repo
git clone https://github.com/ACM-VIT/synesthesia.git
cd synesthesia

# Install dependencies
pnpm install

# Set up Convex (backend)
npx convex dev

# Start the dev server
pnpm dev

# Open http://localhost:3000

Embed Options

Parameter	Type	Description
room	string	Room code to auto-join on load
theme	dark \| light	Override widget color scheme
compact	boolean	Minimal mode — hides queue list
autoplay	boolean	Start playback automatically