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 ## 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 ```bash
cd public/ cd public/
@ -16,15 +16,20 @@ python3 -m http.server 8080
# open http://localhost: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 ## Project structure
``` ```
public/ 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 └── audio/ # Drop MP3 files here for real music
├── songs.json # Generated by tools/probe-songs.py (gitignored)
└── .gitkeep └── .gitkeep
tools/
└── probe-songs.py # Probe audio files → songs.json
``` ```
## Deploying to donothireus.com ## Deploying to donothireus.com
@ -63,28 +68,40 @@ CC-licensed tracks.
1. Download CC-BY licensed MP3s (see sources below) 1. Download CC-BY licensed MP3s (see sources below)
2. Put them in `public/audio/` 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 ```bash
// Before (procedural): ./tools/probe-songs.py -d public/audio
{ title: "Bureaucratic Sunrise", artist: "The Paywalls", # Writes public/audio/songs.json automatically
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" },
``` ```
When a song has a `url` property, the player uses HTML5 Audio The app fetches `audio/songs.json` on startup. If it exists and
instead of Tone.js. You can mix and match — some songs procedural, contains tracks, they replace the procedural builtins. If not,
some real MP3s. the synth songs are used as a fallback.
Set `duration` to the actual track length in seconds. The color The generated JSON looks like:
is used for the progress bar and visualizer.
```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 ### 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/ cd public/audio/
wget -O sneaky-snitch.mp3 "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Sneaky%20Snitch.mp3" wget -O sneaky-snitch.mp3 "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Sneaky%20Snitch.mp3"
# Get the duration in seconds (needs ffprobe) # Generate songs.json from all audio in the directory
ffprobe -v quiet -show_entries format=duration -of csv=p=0 sneaky-snitch.mp3 cd ../..
# output: 120.123456 (use 120) ./tools/probe-songs.py -d public/audio
``` ```
Then update the SONGS array in index.html with the title, artist,
duration, url, and color.
### Attribution ### Attribution
If using CC-BY music, add attribution. The fine print at the 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 The starting wallet is randomized between $0.50 and $10.00
each page load. The +$10 button lets people keep exploring each page load. The +$10 button lets people keep exploring
all the paywalls. all the paywalls (with a $0.50 processing fee, naturally).
## License ## License