Update README for 3-file structure and probe tool

Reflect the split into index.html/style.css/app.js, document the
probe-songs.py workflow and songs.json auto-loading, remove outdated
instructions about editing SONGS array in index.html.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-17 17:12:43 +01:00
commit ffbe601cee

View file

@ -8,7 +8,7 @@ Part of [donothireus.com](https://donothireus.com).
## Quick start
The entire player is a single HTML file with no build step.
No build step, no package manager. Just serve the `public/` directory:
```bash
cd public/
@ -16,15 +16,20 @@ python3 -m http.server 8080
# open http://localhost:8080
```
Or with any other static file server (caddy, nginx, etc).
Or with any other static file server (Caddy, nginx, etc).
## Project structure
```
public/
├── index.html # The complete player (React + Tone.js via CDN)
├── index.html # HTML shell, CDN script tags, meta/OG tags
├── style.css # Animations, hover/focus states, range styling
├── app.js # All React components and logic (JSX via Babel)
└── audio/ # Drop MP3 files here for real music
├── songs.json # Generated by tools/probe-songs.py (gitignored)
└── .gitkeep
tools/
└── probe-songs.py # Probe audio files → songs.json
```
## Deploying to donothireus.com
@ -63,28 +68,40 @@ CC-licensed tracks.
1. Download CC-BY licensed MP3s (see sources below)
2. Put them in `public/audio/`
3. Edit the `SONGS` array in `index.html`, adding a `url` property:
3. Run the probe tool to generate `songs.json`:
```javascript
// Before (procedural):
{ title: "Bureaucratic Sunrise", artist: "The Paywalls",
duration: 90, bpm: 120,
gen: (s,t) => { ... },
wave: "triangle", color: "#e74c3c" },
// After (real audio):
{ title: "Sneaky Snitch", artist: "Kevin MacLeod",
duration: 120,
url: "/audio/sneaky-snitch.mp3",
color: "#e74c3c" },
```bash
./tools/probe-songs.py -d public/audio
# Writes public/audio/songs.json automatically
```
When a song has a `url` property, the player uses HTML5 Audio
instead of Tone.js. You can mix and match — some songs procedural,
some real MP3s.
The app fetches `audio/songs.json` on startup. If it exists and
contains tracks, they replace the procedural builtins. If not,
the synth songs are used as a fallback.
Set `duration` to the actual track length in seconds. The color
is used for the progress bar and visualizer.
The generated JSON looks like:
```json
[
{
"title": "Sneaky Snitch",
"artist": "Kevin MacLeod",
"duration": 120,
"url": "/audio/sneaky-snitch.mp3",
"color": "#e74c3c"
}
]
```
Title and artist are extracted from ID3 tags when available,
falling back to the filename. Duration comes from ffprobe.
You can also probe specific files or write to a custom path:
```bash
./tools/probe-songs.py public/audio/track1.mp3 public/audio/track2.mp3
./tools/probe-songs.py -o public/audio/songs.json *.mp3
```
### Where to get CC-BY music
@ -117,14 +134,11 @@ All of these are free to use with attribution (CC-BY or CC0):
cd public/audio/
wget -O sneaky-snitch.mp3 "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Sneaky%20Snitch.mp3"
# Get the duration in seconds (needs ffprobe)
ffprobe -v quiet -show_entries format=duration -of csv=p=0 sneaky-snitch.mp3
# output: 120.123456 (use 120)
# Generate songs.json from all audio in the directory
cd ../..
./tools/probe-songs.py -d public/audio
```
Then update the SONGS array in index.html with the title, artist,
duration, url, and color.
### Attribution
If using CC-BY music, add attribution. The fine print at the
@ -145,7 +159,7 @@ credits section. Kevin MacLeod's required format:
The starting wallet is randomized between $0.50 and $10.00
each page load. The +$10 button lets people keep exploring
all the paywalls.
all the paywalls (with a $0.50 processing fee, naturally).
## License