+ Download ZIP + Download TAR +
+ ++ This is the BPS (Bill Paxton Soundboard), my entry into the UI Developers Guild Coding Challenge for + February 2024 at the company I work for. +
+ ++ If you want to know a bit more about how (and why) it was made, be sure to check + out the blog post I wrote about it when it was released + on 2024-02-10. +
+ ++ This particular challenge had 3 simple rules (copied verbatim below): +
+ +
+ The BPS satisfies all 3 of the rules: it's an HTML5 / CSS / JS application that creates
+ a series of virtual audio tags, and then loads a WAV or MP3 into each one before
+ inserting them into the document. It then renders a series of clickable image-buttons
+ (each one being an img tag, surrounded by a figure tag, and
+ augmented by the text of a figcaption tag) and attaches a play()
+ function to the click handlers for those figures. Plus, I wrote it all in under 4 hours:
+
player.js and
+ main.js modules;
+ unzip bps.ziptar -xvzf bps.tar.gzcd bps
+ npx http-server
+ + The images and sound clips used for the Bill Paxton Soundboard are copyright their + respective owners, and used under the + fair use provision + of the Constitution of the United + States of America. +
+ ++ All other content on this page (including scripts and text content) is released under a + Creative Commons CC0 1.0 Universal + license. +
+ +Share and enjoy!
+ + + + + \ No newline at end of file diff --git a/src/assets/_root/webtoys/bps/scripts/main.js b/src/assets/_root/webtoys/bps/scripts/main.js new file mode 100644 index 0000000..c58c0d9 --- /dev/null +++ b/src/assets/_root/webtoys/bps/scripts/main.js @@ -0,0 +1,138 @@ +// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 +/**************************************************************************** + * BPS (Bill Paxton Soundboard) + * + * Copyright 2024 Eric Woodward + * Source released under CC0 Public Domain License v1.0 + * https://www.itsericwoodward.com/licenses/cc0/ + * http://creativecommons.org/publicdomain/zero/1.0/ + ****************************************************************************/ + +import { load, play } from "./player.js"; +import rootdir from "./rootdir.js"; + +export default (() => { + // adapted from: https://cheatcode.co/tutorials/how-to-build-a-soundboard-with-javascript + + const sounds = [ + { + name: "true_lies_navel_lint", + fmt: "wav", + image: "aliens_17_days.png", + text: "Navel Lint", + }, + { + name: "true_lies_pathetic", + fmt: "mp3", + image: "aliens_17_days.png", + text: "It's Pathetic!", + }, + + { + name: "aliens_game_over", + fmt: "wav", + image: "aliens_17_days.png", + text: "Game Over!", + }, + { + name: "aliens_current_affairs", + fmt: "wav", + image: "aliens_17_days.png", + text: "Current Affairs", + }, + { + name: "aliens_17_days", + fmt: "wav", + image: "aliens_17_days.png", + text: "17 Days?", + }, + { + name: "aliens_express_elevator", + fmt: "wav", + image: "aliens_17_days.png", + text: "Express Elevator", + }, + + { + name: "weird_science_booze", + fmt: "mp3", + image: "aliens_17_days.png", + text: "Boozehounds Return", + }, + { + name: "weird_science_dead_meat", + fmt: "mp3", + image: "aliens_17_days.png", + text: "Dead Meat", + }, + { + name: "weird_science_sandwich", + fmt: "mp3", + image: "aliens_17_days.png", + text: "Pork Sandwich", + }, + { + name: "weird_science_stewwed", + fmt: "mp3", + image: "aliens_17_days.png", + text: "You're Stewwed", + }, + { + name: "weird_science_turd_brain", + fmt: "mp3", + image: "aliens_17_days.png", + text: "Turd Brain", + }, + ]; + + sounds.forEach(({ name, fmt }) => { + load(name, `${rootdir}/sounds/${name}.${fmt}`); + }); + + // adapted from https://stackoverflow.com/questions/12813573/position-icons-into-circle + + let m = sounds.length; /* how many are ON the circle */ + let tan = Math.tan(Math.PI / m); /* tangent of half the base angle */ + + const build = () => { + const figureButtons = sounds.map(({ name, text }, idx) => { + const caption = document.createElement("figcaption"), + figure = document.createElement("figure"), + img = document.createElement("img"); + caption.textContent = text; + img.alt = text; + img.src = `${rootdir}/images/${name}.png`; + figure.className = "figureButton"; + figure.onclick = () => play(name); + figure.style = `--i: ${idx}`; + figure.append(...[img, caption]); + return figure; + }); + + const randomFigure = document.createElement("figure"), + randomCaption = document.createElement("figcaption"), + randomImg = document.createElement("img"); + randomCaption.textContent = "Random"; + randomImg.alt = "Random"; + randomImg.src = `${rootdir}/images/random.png`; + randomFigure.className = "figureButton"; + randomFigure.onclick = () => + play(sounds[~~(sounds.length * Math.random())].name); + randomFigure.append(...[randomImg, randomCaption]); + + const div = document.createElement("div"); + div.className = "circleWrapper"; + div.style = `--m: ${m}; --tan: ${+tan.toFixed(2)}`; + div.append(...[randomFigure, ...figureButtons]); + document.getElementById("output").replaceWith(div); + }; + + document.addEventListener("DOMContentLoaded", () => { + setTimeout(() => { + build(); + }, 1); + }); + + return { play, build }; +})(); +// @license-end diff --git a/src/assets/_root/webtoys/bps/scripts/player.js b/src/assets/_root/webtoys/bps/scripts/player.js new file mode 100644 index 0000000..305d31a --- /dev/null +++ b/src/assets/_root/webtoys/bps/scripts/player.js @@ -0,0 +1,37 @@ +// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 +/**************************************************************************** + * BPS (Bill Paxton Soundboard) + * + * Copyright 2024 Eric Woodward + * Source released under CC0 Public Domain License v1.0 + * https://www.itsericwoodward.com/licenses/cc0/ + * http://creativecommons.org/publicdomain/zero/1.0/ + ****************************************************************************/ + +// adapted from https://cheatcode.co/tutorials/how-to-build-a-soundboard-with-javascript + +let sounds = []; + +const injectPlayerIntoPage = (name, path) => { + const player = document.createElement("audio"); + player.id = name; + player.src = path; + player.volume = 0.5; + player.type = "audio/mpeg"; + document.body.appendChild(player); + }, + load = (name, path) => { + sounds = [...sounds, { name, path }]; + injectPlayerIntoPage(name, path); + }, + play = (name) => { + const player = document.getElementById(name); + if (player) { + player.pause(); + player.currentTime = 0; + player.play(); + } + }; + +export { load, play }; +// @license-end diff --git a/src/assets/_root/webtoys/bps/scripts/rootdir.js b/src/assets/_root/webtoys/bps/scripts/rootdir.js new file mode 100644 index 0000000..5165c7b --- /dev/null +++ b/src/assets/_root/webtoys/bps/scripts/rootdir.js @@ -0,0 +1 @@ +export default "/webtoys/bps"; diff --git a/src/assets/_root/webtoys/bps/sounds/aliens_17_days.wav b/src/assets/_root/webtoys/bps/sounds/aliens_17_days.wav new file mode 100644 index 0000000..1284f08 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/aliens_17_days.wav differ diff --git a/src/assets/_root/webtoys/bps/sounds/aliens_current_affairs.wav b/src/assets/_root/webtoys/bps/sounds/aliens_current_affairs.wav new file mode 100644 index 0000000..4baf729 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/aliens_current_affairs.wav differ diff --git a/src/assets/_root/webtoys/bps/sounds/aliens_express_elevator.wav b/src/assets/_root/webtoys/bps/sounds/aliens_express_elevator.wav new file mode 100644 index 0000000..f44fbfa Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/aliens_express_elevator.wav differ diff --git a/src/assets/_root/webtoys/bps/sounds/aliens_game_over.wav b/src/assets/_root/webtoys/bps/sounds/aliens_game_over.wav new file mode 100644 index 0000000..a701f0d Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/aliens_game_over.wav differ diff --git a/src/assets/_root/webtoys/bps/sounds/true_lies_navel_lint.wav b/src/assets/_root/webtoys/bps/sounds/true_lies_navel_lint.wav new file mode 100644 index 0000000..a17f631 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/true_lies_navel_lint.wav differ diff --git a/src/assets/_root/webtoys/bps/sounds/true_lies_pathetic.mp3 b/src/assets/_root/webtoys/bps/sounds/true_lies_pathetic.mp3 new file mode 100644 index 0000000..d7a96d3 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/true_lies_pathetic.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_booze.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_booze.mp3 new file mode 100644 index 0000000..8995ed2 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_booze.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_dead_meat.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_dead_meat.mp3 new file mode 100644 index 0000000..8181bea Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_dead_meat.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_he_pukes.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_he_pukes.mp3 new file mode 100644 index 0000000..bde3eb4 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_he_pukes.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_sandwich.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_sandwich.mp3 new file mode 100644 index 0000000..1100218 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_sandwich.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_stewwed.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_stewwed.mp3 new file mode 100644 index 0000000..b912bc3 Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_stewwed.mp3 differ diff --git a/src/assets/_root/webtoys/bps/sounds/weird_science_turd_brain.mp3 b/src/assets/_root/webtoys/bps/sounds/weird_science_turd_brain.mp3 new file mode 100644 index 0000000..297889a Binary files /dev/null and b/src/assets/_root/webtoys/bps/sounds/weird_science_turd_brain.mp3 differ diff --git a/src/assets/_root/webtoys/bps/styles/styles.css b/src/assets/_root/webtoys/bps/styles/styles.css new file mode 100644 index 0000000..0264d93 --- /dev/null +++ b/src/assets/_root/webtoys/bps/styles/styles.css @@ -0,0 +1,111 @@ +/* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 */ +/**************************************************************************** + * BPS (Bill Paxton Soundboard) + * + * Copyright 2024 Eric Woodward + * Source released under CC0 Public Domain License v1.0 + * https://www.itsericwoodward.com/licenses/cc0/ + * http://creativecommons.org/publicdomain/zero/1.0/ + ****************************************************************************/ + + html { + color: #DDE6ED; + background-color: #161f2b; + font-size: 20px; + margin: .5rem; +} + +a { + color: #abc1d3; +} + +a:visited { + color: #799cb9; +} + +code { + background-color: #444b55; +} + +p { + text-align: justify; +} + +.center { text-align: center; } + +.circleWrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.downloadButton { + border: 1px dashed; + border-radius: .5rem; + display: inline-block; + font-size: .75rem; + margin: 1rem; + max-width: 8rem; + padding: 1rem; + text-align: center; + text-decoration: none; +} + +.figureButton { + cursor: pointer; + margin: 0.5rem; + max-width: 5.5rem; +} + +.figureButton:hover { + filter: brightness(1.5); +} + +.figureButton figcaption { + text-align: center; +} + +.figureButton img { max-width: 100% } + +/**************************************************************************** + * Media Queries + ****************************************************************************/ + + @media all and (min-width: 950px) { + + /* circular layout derived from https://stackoverflow.com/a/12817454 */ + + .circleWrapper { + --d: 6.5em; /* image size */ + --rel: .75; /* how much extra space we want between images, 1 = one image size */ + --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */ + --s: calc(2*var(--r) + var(--d)); /* container size */ + height: var(--s); + margin: 1rem auto; + position: relative; + width: var(--s); + } + + .figureButton { + --az: calc(var(--i)*1turn/var(--m)); + height: var(--d); + left: 50%; + margin: calc(-.5*var(--d)); + position: absolute; + top: 50%; + transform: + rotate(var(--az)) + translate(var(--r)) + rotate(calc(-1*var(--az))); + width: var(--d); + } + + .downloadButton { + font-size: 1rem; + margin: 4rem 1rem 1rem; + } + +} + +/* @license-end */ diff --git a/src/pages/web.md b/src/pages/web.md index 185a120..e316575 100644 --- a/src/pages/web.md +++ b/src/pages/web.md @@ -15,6 +15,7 @@ The web is, IMHO, the most revolutionary invention in information sharing since - [LinkLists](/linklists) - Lists of links (natch) to various web sites, resources, and/or [blogs](/linklists/blogroll.html), typically organized around a particular subject. Like bookmarking, but not. Updated (occasionally). - [Licenses](/licenses) - Permanent copies of the licenses that I use [here](https://git.itsericwoodward.com/explore/repos) and [there](https://www.planarvagabond.com/). +- [WebToys](/webtoys) **NEW** - A small collection of useless, interactive fun for your web browser. ### Elsewhere diff --git a/src/pages/webtoys/index.md b/src/pages/webtoys/index.md new file mode 100644 index 0000000..9825910 --- /dev/null +++ b/src/pages/webtoys/index.md @@ -0,0 +1,16 @@ +--- +title: WebToys +description: Some useless, interactive fun for your web browser. +date_pub: 2024-02-09T23:58:51.000-04:00 +section: web +content_type: feature +short_code: mwt +--- + +I occasionally do code challenges and other fun web things, and thought I should start collecting them here. + + + +- [BPS (Bill Paxton Soundboard)](bps/) - An old-idea-made-new as part of a time-limited code challenge. diff --git a/src/sitePosts/journal/2024/02-10-webtoys-bps.md b/src/sitePosts/journal/2024/02-10-webtoys-bps.md new file mode 100644 index 0000000..a7f3a86 --- /dev/null +++ b/src/sitePosts/journal/2024/02-10-webtoys-bps.md @@ -0,0 +1,44 @@ +--- +title: My first WebToy - the BPS (Bill Paxton Soundboard) +content_type: journal +date_pub: 2024-02-10T17:19:07.000-04:00 +description: I've written a small HTML5 Soundboard themed around the late actor, Bill Paxton. +tags: web fun js +--- + +Ever since the early days of JavaScript (remember `document.layers`?), I've been interested in building web applications, from the complex to the trivial. In that time, I've built more signature generators, magic 8-balls, and die rollers than I care to mention. But, apart from the tools at [Planar Vagabond](https://www.planarvagabond.com/tools/index.html), most of these #WebToys are lost to time (or sitting on some 3/4 full hard drive waiting to be rediscovered). + +Until now! + +I've decided to start archiving them here, in my lightly-tended [digital garden](https://indieweb.org/digital_garden), under the heading of [WebToys](/webtoys/) (a moniker chosen based on their dubious utility). And the first #WebToy is a project I've had in mind for over 25 years, but that I've just finally put the 4-ish hours in to complete: . + +### [The BPS (Bill Paxton Soundboard)](/webtoys/bps/) + +Back when I was in college (circa 1997), a friend of mine and I would often discuss ideas for "fun" (and typically useless) computer programs. One night, one of us suggested a virtual See-and-Say themed around quotes from the great character actor, the late [Bill Paxton[(https://en.wikipedia.org/wiki/Bill_Paxton). Of course, writing such a program wasn't worth the effort (especially circa 1997), so we just kind of chuckled and forgot about it. + +Fast-forward to 2024: the company I work for has a "UI Developers Guild" (for those interested in bettering their development skills), and they recently started running coding challenges, both to drive engagement with the guild and to give the coders a chance to do something non-work related. This particular challenge had 3 simple rules (copied verbatim below): + +1. _Play some kind of music / sound_ +2. _Be viewable_ +3. _Don't work over 4hrs!!!!_ + +After briefly contemplating what to offer as my entry for the challenge, the idea from college bubbled back to the front of my brain, and I thought, "this is my chance!" + +The rest, as they say, is history. + +### Work Breakdown + +- One hour thinking through the concept and writing the rough draft [`player.js`](/webtoys/bps/scripts/player.js) and [`main.js`](/webtoys/bps/scripts/main.js) modules; +- One hour to turn draft into MVP, addressing [layout](/webtoys/bps/styles/styles.css) and audio issues; +- One hour to add images and expand the audio selection; and +- One final hour[^1] to add mobile support and some light documentation. + +Now, this is obviously not the first Bill Paxton soundboard on the #interwebs, nor is it the most comprehensive. But, unlike the ones in the App or Play stores, mine doesn't require any scary permissions, and won't track you relentlessly. And, unlike other web-based soundboards, mine has no advertising, and... won't track you relentlessly. So maybe mine _is_ better, at least in some ways. :D + +Plus, releasing it here doubles as my entry into the aforementioned coding challenge, so win-win! + +With a few more hours work, I'd probably turn it into a PWA and add full offline support (caching the sounds and images in localstorage), or maybe disable the buttons until the previous sound is done, but... that's for another day. + +I suspect I'll wind up creating (or finding) other similar small #WebToys in the future, and when I do, I'll add them [here](/webtoys/). In the meantime, I'm open to suggestions: what other tiny, useless programs does the world need more of? + +[^1]: Of course, it took an additional couple of hours to move it to my website and actually get it out on the web, but those steps were technically outside the scope of the original project, which only required a codepen, so I don't count that.