Initial commit: Pay2Play! satirical music player
Paywalled music player where every feature costs money — pause, resume, skip, volume, even closing the app. Built with React 18 and Tone.js via CDN, zero build step. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
commit
96b1ecf7e6
6 changed files with 851 additions and 0 deletions
152
README.md
Normal file
152
README.md
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
# Pay2Play! — The Worst Music Player
|
||||
|
||||
A satirical music player where every interaction is paywalled.
|
||||
Pause? That's $0.01. Resume? Separate charge. Turn off repeat?
|
||||
That costs *more* than turning it on.
|
||||
|
||||
Part of [donothireus.com](https://donothireus.com).
|
||||
|
||||
## Quick start
|
||||
|
||||
The entire player is a single HTML file with no build step.
|
||||
|
||||
```bash
|
||||
cd public/
|
||||
python3 -m http.server 8080
|
||||
# open http://localhost:8080
|
||||
```
|
||||
|
||||
Or with any other static file server (caddy, nginx, etc).
|
||||
|
||||
## Project structure
|
||||
|
||||
```
|
||||
public/
|
||||
├── index.html # The complete player (React + Tone.js via CDN)
|
||||
└── audio/ # Drop MP3 files here for real music
|
||||
└── .gitkeep
|
||||
```
|
||||
|
||||
## Deploying to donothireus.com
|
||||
|
||||
Just serve the `public/` directory. If you're using Caddy
|
||||
(which I know you are), something like:
|
||||
|
||||
```
|
||||
donothireus.com {
|
||||
root * /srv/donothireus/public
|
||||
file_server
|
||||
encode gzip
|
||||
}
|
||||
```
|
||||
|
||||
Or to put it at a subpath like `/payplay`:
|
||||
|
||||
```
|
||||
donothireus.com {
|
||||
handle /payplay/* {
|
||||
root * /srv/donothireus/payplay/public
|
||||
uri strip_prefix /payplay
|
||||
file_server
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Audio: procedural vs real music
|
||||
|
||||
By default the player uses Tone.js to generate procedural synth
|
||||
loops — no external audio files needed. This is funny on its own
|
||||
("even the songs are cheaply made") but you can swap in real
|
||||
CC-licensed tracks.
|
||||
|
||||
### Switching to self-hosted MP3s
|
||||
|
||||
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:
|
||||
|
||||
```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" },
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Set `duration` to the actual track length in seconds. The color
|
||||
is used for the progress bar and visualizer.
|
||||
|
||||
### Where to get CC-BY music
|
||||
|
||||
All of these are free to use with attribution (CC-BY or CC0):
|
||||
|
||||
**Kevin MacLeod / Incompetech** (CC-BY 4.0)
|
||||
- https://incompetech.com/music/royalty-free/
|
||||
- Thousands of tracks, well-known, easy to search by mood/genre
|
||||
- Attribution: "Title" Kevin MacLeod (incompetech.com)
|
||||
Licensed under Creative Commons: By Attribution 4.0
|
||||
- Also mirrored on archive.org: https://archive.org/details/Incompetech
|
||||
|
||||
**Free Music Archive** (various CC licenses — filter for CC-BY)
|
||||
- https://freemusicarchive.org/
|
||||
- Filter by license type, download MP3s directly
|
||||
- Check each track's specific license
|
||||
|
||||
**SampleSwap** (CC-BY-NC-SA for most tracks)
|
||||
- https://sampleswap.org/mp3/creative-commons/free-music.php
|
||||
- 320kbps MP3s, various genres
|
||||
|
||||
**Pixabay Music** (Pixabay License — free, no attribution required)
|
||||
- https://pixabay.com/music/
|
||||
- No API key needed for downloads, but no hotlinking
|
||||
|
||||
### Download and host workflow
|
||||
|
||||
```bash
|
||||
# Example: grab a Kevin MacLeod track
|
||||
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)
|
||||
```
|
||||
|
||||
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
|
||||
bottom of the player is a good place, or add a separate
|
||||
credits section. Kevin MacLeod's required format:
|
||||
|
||||
> "Track Title" Kevin MacLeod (incompetech.com)
|
||||
> Licensed under Creative Commons: By Attribution 4.0
|
||||
> https://creativecommons.org/licenses/by/4.0/
|
||||
|
||||
## How it works
|
||||
|
||||
- React 18 loaded from CDN, JSX compiled by Babel standalone
|
||||
- Tone.js for procedural synth audio (no build step needed)
|
||||
- HTML5 Audio API for self-hosted MP3 playback
|
||||
- Zero dependencies to install, zero build tools
|
||||
- All state is client-side, nothing persisted
|
||||
|
||||
The starting wallet is randomized between $0.50 and $10.00
|
||||
each page load. The +$10 button lets people keep exploring
|
||||
all the paywalls.
|
||||
|
||||
## License
|
||||
|
||||
Do whatever you want with this. It's a joke.
|
||||
Loading…
Add table
Add a link
Reference in a new issue