You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A browser-based acoustic data transmission app that enables devices to transmit data to each other using only sound (speakers and microphones).
3
+
A browser-based acoustic data link for air-gapped, peer-to-peer transmission using device audio hardware. Built with React and the Web Audio API, it encodes text and files into 8-FSK audio signals to transmit data wirelessly over sound waves.
4
4
5
-
**Visual Metaphor**: "Deep Space Digital Radio". The interface borrows elements from high-frequency radio dashboards and cryptography terminals, employing an immersive animated aurora background with dark, glass-morphic hardware telemetry panels, a fixed primary green accent for optimal visual contrast, and decrypted text animations.
5
+
## What This Does
6
6
7
-
*Developed by Asmith — asmyth@duck.com*
7
+
This project allows two devices to communicate with each other completely offline and without any RF network (Wi-Fi, Bluetooth, Cellular). It uses the device's built-in speaker to emit a sequence of musical tones (Frequency-Shift Keying) and the receiving device's microphone to listen to and decode those tones back into digital data. It is capable of transmitting both short text payloads and small files across an air gap.
8
+
9
+
## Features
10
+
11
+
-**8-FSK Modulation**: Encodes 3 bits of data per audio symbol using 8 distinct frequencies.
12
+
-**True Sync Preamble**: Uses a robust synchronization protocol to lock onto the transmission perfectly, discarding Javascript timer drift.
13
+
-**SNR-Based Handshake Detection**: Analyzes Signal-to-Noise Ratio to prevent false triggers from ambient room noise.
14
+
-**Data Integrity**: All payloads are verified upon receipt using CRC32 checksums.
15
+
-**"Dead Frequency" UI**: A custom, vintage signal intelligence aesthetic with a warm parchment/amber/teal palette, `DM Serif Display` typography, and kinetic CSS animations.
16
+
17
+
## Tech Stack
8
18
9
-
## Features (Phase 1: Frontend Architecture)
10
-
-**Role Selection:** Toggle instantly between Transmitter and Receiver dashboards.
11
-
-**Transmitter Dashboard:** Mock configurations for FSK encoding profiles, bitrate targets, and redundancy levels, with full aesthetic waveform telemetry.
12
-
-**Receiver Dashboard:** Mock listening states, ambient audio spectrum visualization, and signal decoding console logs.
13
-
-**Kinetic UI:** Smooth transitions and reactive elements via Framer Motion.
14
-
-**Anti-Gravity Architecture:** Full `prefers-reduced-motion` accessibility support, API fallback override mockups, and strict React state separation.
19
+
-**Frontend Framework**: React 18 + Vite
20
+
-**Styling & Motion**: Tailwind CSS + Framer Motion (for kinetic elements and page transitions)
21
+
-**Audio Processing**: Native Web Audio API (`AudioContext`, `AnalyserNode`, `OscillatorNode`)
22
+
-**Icons**: Lucide React
15
23
16
-
## Setup Instructions
24
+
## Getting Started
17
25
18
26
### Prerequisites
19
27
- Node.js (v18+)
@@ -22,32 +30,31 @@ A browser-based acoustic data transmission app that enables devices to transmit
22
30
### Installation
23
31
1. Clone the repository
24
32
2. Install dependencies:
25
-
\`\`\`bash
33
+
```bash
26
34
npm install
27
-
\`\`\`
35
+
```
28
36
3. Start the development server:
29
-
\`\`\`bash
37
+
```bash
30
38
npm run dev
31
-
\`\`\`
39
+
```
32
40
33
-
## Deployment Guide
41
+
*Note: For the acoustic link to work, the transmitting device needs a functioning speaker, and the receiving device needs a functioning microphone and must grant microphone permissions in the browser.*
34
42
35
-
### GitHub Pages (Automated)
36
-
This repository includes a GitHub Action for deploying natively to GitHub Pages.
37
-
1. Push your code to the \`main\` branch.
38
-
2. In your repository settings:
39
-
- Go to **Settings** > **Pages**.
40
-
- Set the source to **GitHub Actions**.
41
-
3.*Phase 2 Only:* Add \`VITE_API_KEY\` to your Repository Secrets if the AI summarization fallback is necessary.
43
+
## How It Works
42
44
43
-
### Netlify Deployment
44
-
1. Connect your repository to Netlify.
45
-
2.The included \`netlify.toml\` handles the build command (\`npm run build\`) and SPA routing redirects automatically.
46
-
3.*Phase 2 Only:* Add the \`VITE_API_KEY\` environment variable in the Netlify site settings.
45
+
1.**Encoding**: The application takes a text string or a file buffer and chunks it into smaller packets. Each packet calculates a CRC32 checksum. The binary data is then mapped to 8 specific audio frequencies (8-FSK).
46
+
2.**Transmission**: The transmitter broadcasts a dual-tone handshake to wake up any nearby receivers, followed by a known Sync Preamble, and then the actual payload frequencies using precisely scheduled Web Audio API `OscillatorNodes` (Look-Ahead scheduling).
47
+
3.**Decoding**: The receiver continuously polls audio data via an `AnalyserNode` performing Fast Fourier Transforms (FFT). It detects the handshake using SNR, precisely aligns itself using the Sync Preamble, and then records the strongest frequencies over time to rebuild the packet.
48
+
4.**Verification**: Once a packet is received, its CRC32 is checked. If it matches, the data is pushed to the final payload.
47
49
48
-
## API Override System
49
-
To protect production stability and reduce quota exhaustion, an Override System is implemented. If the backend services experience rate-limiting (`429`) or a key expiration, the UI intercepts the error and displays a modal.
50
-
Users can input their own Google SDK API keys dynamically to bypass the server limitations and continue transmitting data.
50
+
## Limitations & Future Ideas
51
+
52
+
-**Bitrate**: Current speeds are around ~37 bps. Future versions will optimize the DSP loop to increase throughput.
53
+
-**Distance**: Environmental noise heavily impacts reliability. Devices must be relatively close in a quiet room for uncorrupted transmission. Error correction coding (like Reed-Solomon) is planned to recover flipped bits automatically.
54
+
55
+
## Deployment
56
+
57
+
This repository includes a GitHub Action for deploying natively to GitHub Pages (`.github/workflows/deploy.yml`). It also includes a `netlify.toml` for easy deployment to Netlify.
51
58
52
59
---
53
-
> Note: Replace the default Vite favicon in `public/` to match the radio/acoustic transmission metaphor.
0 commit comments