This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
I built SyncPlay — an open-source, real-time music experience that lets a group of people listen to the same music together across multiple devices.
The idea started with a simple question:
What if our phones could become one synchronized music system instead of everyone sitting around looking at one screen?
With SyncPlay, one person creates a room and shares a QR code. Friends scan it, join the room, search for music, and add songs to a shared queue.
When playback starts, SyncPlay keeps the connected devices synchronized while allowing every person to control their own device volume independently.
Create Room
↓
Share QR
↓
Friends Join
↓
Search Music
↓
Shared Queue
↓
Synchronized Playback
↓
Put the phone down
↓
Enjoy the outdoors
It's designed for situations like:
- 🌳 Park hangouts
- 🧺 Picnics
- 🏕️ Camping
- 🌅 Sunset sessions
- 🏃 Running groups
- 🚴 Cycling
- 🎉 Outdoor gatherings
The goal of the Touch Grass challenge is to make the screen the shortest part of the experience.
That's exactly what SyncPlay tries to do.
Demo
The project is currently under development, so there is no deployed demo yet.
I'm building the MVP around the core experience:
- Create and join rooms
- QR-based room joining
- Music search
- Shared queue
- Real-time synchronized playback
- Individual device volume control
- AI-powered outdoor music sessions
A live deployment will be added once the MVP is ready.
Code
GitHub Repository:
https://github.com/Tanmay-Tiwaricyber/SyncPlay
SyncPlay is being developed as an open-source project, including the real-time synchronization engine, room protocol, frontend, backend, and AI integration.
The goal is to make the project useful not only as a finished application, but also as something other developers can inspect, modify, and build upon.
How I Built It
SyncPlay is built with a lightweight web stack so that people can join from almost any device without installing a dedicated application.
Tech Stack
- HTML — application structure
- CSS — responsive interface
- JavaScript — client-side interaction and playback
- Node.js — backend runtime
- Express.js — HTTP/API layer
- WebSockets — real-time room communication
- Web Audio / browser audio APIs — local playback and volume control
- Render — planned deployment platform
The core architecture looks like this:
SYNCPLAY
│
┌────────┴────────┐
│ │
Frontend Node.js
HTML/CSS/JS Express + WebSocket
│ │
│ ┌─────┴─────┐
│ │ │
│ Room Manager Sync Engine
│ │
└───────────┬───────────┘
│
Music Provider
│
┌───────────┼───────────┐
↓ ↓ ↓
Phone A Phone B Laptop
100% 60% 80%
Real-Time Synchronization
The server maintains the authoritative playback state.
Each room keeps information such as:
{
"trackId": "track_123",
"state": "playing",
"position": 84.32,
"serverTimestamp": 1791250000000
}
Clients use the server timing information to calculate their expected playback position.
If a device drifts away from the expected position, SyncPlay can correct the playback and bring it back into synchronization.
The important part is that volume remains local.
If five people are connected:
Person A → 100%
Person B → 70%
Person C → 50%
Person D → 85%
Person E → 35%
everyone can hear the synchronized music at their preferred volume.
Open-Source AI: Outdoor DJ
The AI component is designed around an open-weight model such as Gemma.
Instead of adding a generic chatbot, the AI has a specific job:
Understand the outdoor activity and create a music-session plan.
For example:
User:
"Create a chill playlist for a sunset picnic."
↓
Open-Weight AI
↓
{
"activity": "sunset picnic",
"mood": "chill",
"duration": 60,
"energy": "low-medium",
"genres": [
"indie",
"acoustic",
"pop"
]
}
↓
Music Search
↓
Shared Queue
This keeps the open-source AI at the core of the experience instead of using it as a decorative feature.
Why Does Open Innovation Matter?
Music synchronization itself doesn't require AI.
The interesting question was:
Where can open AI actually make this experience better?
That's where the Outdoor DJ came in.
A closed AI API could certainly generate a playlist, but using an open-weight model gives the project much more control over the intelligence behind it.
Model freedom
The AI layer can be replaced with another open model as the ecosystem evolves.
SyncPlay doesn't need to be permanently tied to one proprietary provider.
Customization
The model can be optimized around a specific task:
understanding activities → understanding mood → generating a structured music session.
That is much more focused than building another general-purpose chatbot.
Privacy
An outdoor session can include personal preferences, activities, and listening habits.
An open/self-hostable AI architecture gives us the option to process this information in an environment we control rather than automatically sending everything to a closed AI provider.
Transparency
Because the project is open source, developers can inspect how the synchronization system and AI integration work, modify them, and experiment with alternative models.
For me, that's the biggest advantage of open innovation:
The AI isn't a black box that the product depends on forever. It's a component that we can understand, replace, and improve.
Prize Categories
Featured Categories
- Best Use of Gemma — using an open-weight Gemma model for the AI Outdoor DJ experience.
- Best Use of Render — planned deployment of the SyncPlay Node.js application and real-time backend on Render.
Partner Categories
[Add only the categories for technologies actually used in the final implementation.]
Final Thoughts
SyncPlay started as a technical experiment around synchronized playback.
But the real idea is much simpler:
Music should bring people together, not keep them staring at a screen.
Create a room.
Scan the QR.
Pick some music.
Press play.
Then Touch Grass. 🌳🎵
Thanks for checking out SyncPlay!
Top comments (0)