150 lines
5.0 KiB
HTML
150 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
/****************************************************************************
|
|
* 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/
|
|
****************************************************************************/
|
|
-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>BPS (Bill Paxton Soundboard)</title>
|
|
<link rel="stylesheet" href="styles/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="output"></div>
|
|
|
|
<!--
|
|
`cat main.js | openssl dgst -sha256 -binary | openssl base64 -A`, then repeat for 384 and 512
|
|
-->
|
|
<script crossorigin="anonymous" integrity="sha256-YvGi/WY2dKJwaU3cCMLSkiJCnE2hFCiiUdRwqWTGvEE=
|
|
sha384-mtemuzaWEW/0HsyxJyDCaqMquUejVMwzs5VSj5KOr0jrg0+bG/aV2JGsvn/5AbRP
|
|
sha512-z5iEy8ijJzKBzzzBZSdt1DFqwsHLRAV2fvGk4N7P0VikiXtRla258zX7YiSvSIwYskOnnPySzFLaDAdXWUkgNQ=="
|
|
src="scripts/main.js" type="module" ></script>
|
|
|
|
<noscript>
|
|
<p>Sorry, but the Bill Paxton Soundboard requires JavaScript to work.</p>
|
|
<p>Please enable it or try using a different browser.</p>
|
|
</noscript>
|
|
|
|
<p class="center">
|
|
<a class="downloadButton" href="bps.zip">Download ZIP</a>
|
|
<a class="downloadButton" href="bps.tar.gz">Download TAR</a>
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<h2>What is This?</h2>
|
|
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
If you want to know a bit more about how (and why) it was made, be sure to check
|
|
out <a href="/journal/2024/02-10-webtoys-bps">the blog post I wrote about it</a> when it was released
|
|
on 2024-02-10.
|
|
</p>
|
|
|
|
<h3>The Rules</h3>
|
|
|
|
<p>
|
|
This particular challenge had 3 simple rules (copied verbatim below):
|
|
</p>
|
|
|
|
<ol>
|
|
<li><em>Play some kind of music / sound</em></li>
|
|
<li><em>Be viewable</em></li>
|
|
<li><em>Don't work over 4hrs!!!!</em></li>
|
|
</ol>
|
|
|
|
<p>
|
|
The BPS satisfies all 3 of the rules: it's an HTML5 / CSS / JS application that creates
|
|
a series of virtual <code>audio</code> 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 <code>img</code> tag, surrounded by a <code>figure</code> tag, and
|
|
augmented by the text of a <code>figcaption</code> tag) and attaches a <code>play()</code>
|
|
function to the click handlers for those <code>figure</code>s. Plus, I wrote it all in under 4 hours:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
One hour thinking through the concept and writing the rough draft
|
|
<a href="scripts/player.js"><code>player.js</code></a> and
|
|
<a href="scripts/main.js"><code>main.js</code></a> modules;
|
|
</li>
|
|
<li>
|
|
One hour to turn draft into an MVP, addressing
|
|
<a href="styles/styles.css">layout</a> and audio issues;
|
|
</li>
|
|
<li>
|
|
One hour to add images and expand the audio selection; and
|
|
</li>
|
|
<li>
|
|
One final hour to add mobile support and some light documentation.
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>How to Install Locally</h3>
|
|
|
|
<ol>
|
|
<li>
|
|
Download either the <a href="bps.zip">ZIP'd</a>
|
|
or <a href="bps.tar.gz">TAR-balled</a> version.
|
|
</li>
|
|
<li>
|
|
Decompress it:
|
|
<ul>
|
|
<li>For the ZIP: <code>unzip bps.zip</code></li>
|
|
<li>For the TAR-ball: <code>tar -xvzf bps.tar.gz</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
Change to the new directory: <code>cd bps</code>
|
|
</li>
|
|
<li>
|
|
Start an HTTP server: <code>npx http-server</code>
|
|
</li>
|
|
<li>
|
|
Point your web browser to
|
|
<a href="http://127.0.0.1:8080/">http://127.0.0.1:8080/</a>.
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>Copyright</h3>
|
|
|
|
<ul>
|
|
<li><em>True Lies</em> is copyright 1994 20th Century Fox.</li>
|
|
<li><em>Aliens</em> is copyright 1986 Twentieth Century Fox.</li>
|
|
<li><em>Weird Science</em> is copyright 1985 Universal Pictures (I think).</li>
|
|
</ul>
|
|
|
|
<p>
|
|
The images and sound clips used for the Bill Paxton Soundboard are copyright their
|
|
respective owners, and used under the
|
|
<a href="https://fairuse.stanford.edu/overview/fair-use/">fair use provision</a>
|
|
of the <a href="https://constitution.congress.gov/constitution/">Constitution of the United
|
|
States of America</a>.
|
|
</p>
|
|
|
|
<p>
|
|
All other content on this page (including scripts and text content) is released under a
|
|
<a href="/licenses/cc0/">Creative Commons CC0 1.0 Universal</a>
|
|
license.
|
|
</p>
|
|
|
|
<p>Share and enjoy!</p>
|
|
|
|
<p class="center">
|
|
<a href="/web.html">More of Eric's Web Stuff</a>
|
|
</p>
|
|
|
|
</body>
|
|
</html> |