dontstopthepizzaparty

A work in progress...

Jekyll hosted on GitHub pages.

Install Jekyll by typing the following into the command line.

$ gem install jekyll bundler

Then once you have cloned the repository and navigated to it you can preview at http://localhost:4000 by typing the following into the command line.

$ jekyll serve

The Pizza Mixer

The homepage’s Pizza Mixer tab expands into the mixer itself. Tap or pull it up; the same tab stays attached as its header. Tap it again, drag down, or press Escape to collapse back to the bottom tab without resetting the mix. The collapsed tab keeps a play/stop button beside its chevron, so the music can be started or stopped without opening the mixer. Pull up further for more room. On phones, scrolling the mixer also grows it to nearly full screen. Every sound is synthesized in the browser with Web Audio.

• Transport: play/stop, tempo (70–180) with tap tempo, master volume and meter, and 13 groove presets in three groups:

  • Four on the floor: House, Deep house, Techno, Disco, Afro house, Synthwave
  • Breaks and bass: Broken beat, UK garage, Drum & bass
  • Hip-hop and Latin: Boom bap, Lo-fi, Trap, Dembow

  A preset sets the pattern, tempo, swing and chord progression; key, scale and the mix stay as you set them. Add a groove by adding an entry to GROOVES in files/mixer-engine.js.

• Steps: a 16-step grid for kick, clap, hat, open hat, conga, bass and chords. Tap a pad to cycle it: on, then accent, then off. On the bass row the second state is an octave up, and on the chords row it holds the chord. Key, scale, chord progression, swing, 🎲 Surprise me and Clear are here too.

• Mixer: a strip per channel with mute, solo, level, tone, pan, echo send, space send and a live meter.

• FX: a DJ filter (low-pass to high-pass) with resonance, drive, a tempo-synced echo, reverb ("space"), and seven performance pads: roll, echo throw, bass kill, riser, pizza horn, laser and Pizza Drop. Pizza Drop shares the homepage button’s bar-aligned build-up and bass drop; with sound stopped it produces a visual burst. Keys 1–7 play the pads and Space plays or stops. The panel ends with "Record a performance": see "Recording a performance" below.

• Lights: the light show, plus "Pizzas dance to the music", which turns the wallpaper into a spectrum analyser.

• Sets: share a mix as a link (#mix=…), find your recordings (and post them to the mix board), save up to four mixes in the browser, or reset to the house mix.

files/mixer-engine.js is the sound engine. It's plain data and Web Audio with no DOM, so it can be tested in Node. files/stage.js connects it to the deck.

Recording a performance

Hit ● Rec in the mixer's top row, next to Play. It's there on every tab, and shows the running time while it records. Play the pads, sweep the filter, drop the pizza, and hit it again to stop. The recording appears as a row in "Record a performance" at the end of the FX tab (which has its own Record button) and in the Sets tab, with these buttons:

• ▶ Replay plays the performance back on the deck: the pads light up and the sliders move.
• ⬇ MP3 downloads the audio as a 192 kbps MP3. ⬇ WAV is the uncompressed version, for editing.
• 🔗 Copy link makes a #perf=… link. Whoever opens it hears the performance replayed by their own browser.
• 📤 Share opens the phone's share sheet with the MP3 and the link (only shown where the browser supports it).
• 🍕 Post it uploads the MP3 to the mix board and gives back a dontstopthepizzaparty.com/mixes/?m=… link that plays it for anyone. It's only shown once the mix board has a backend: see "The mix board" below.

Recordings are kept until the page is closed, up to six at a time. Download or copy a link for the ones worth keeping.

How it works: a recording is two things captured in the same pass.

• A take: the mix as it was when recording began, plus every pad press and release, FX knob move and drop, timed in 16ths of a step from the bar line. It's a few hundred bytes, so it fits in a link. Takes cover the pads, the drop and the six FX knobs (filter, resonance, drive, echo feedback, echo return, space return); changes to the pattern or the channel strips while recording are heard in the audio but aren't replayed from a link. sanitizeTake in the engine checks everything that arrives in a link. A take can be 128 bars long.
• The audio: the engine copies the master output sample for sample, with an AudioWorklet (files/rec-worklet.js) or, in older browsers and on pages served without https, a ScriptProcessor. files/mp3-worker.js then writes the MP3 and the WAV in a Web Worker so the beat doesn't stutter. No browser codec is involved, so there's no .webm or .m4a anywhere and it behaves the same in every browser. A browser that can't capture audio still gets the take and the link.

The mix board

/mixes/ plays recorded mixes. It isn't linked from the homepage yet: type mixes, mixtape, mix board or leaderboard in the password box.

• House mixes are recordings kept in this repository. Add the MP3 to files/mixes/ and an entry to _data/mixes.yml.
• Posted mixes are the ones visitors upload with 🍕 Post it. Each gets a link, /mixes/?m=<id>, with a player, an upvote button and, when the recording's take came along, a button that replays it in the mixer.
• The leaderboard lists posted mixes by votes (Top) or by date (New).

The site is static, so posted mixes, votes and the leaderboard live in a WordPress plugin, wordpress/pizza-mixes (its README has the install steps and the API). Point the site at it with mix_api in _config.yml:

mix_api: "https://your-wordpress-site.example/wp-json/pizza/v1"

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗