skip to content

Get started

HYPERBLAM is just some JavaScript (previously LiveScript; AKA ECMAScript) that makes some HTML elements make music in web browsers.

It doesn’t have a complex build or installation process and you can use as much or as little of it as you want. This brief guide will show you how to get up and running.

Structure

The code for HYPERBLAM lives here on git.gay. It’s quite a small project that consists of:

  1. The /src code, divided into
    • Elements: The custom (HTML) element definitions
    • Primitives: Some classes that some HTML elements are based on
    • Tools: Some little helper scripts
  2. A minified version of that code, under /dist (including a zip archive).
  3. The /api documentation, explaining how to use everything (and prettified into the elements pages).

Diagram showing how the Hyperblam elements and the API docs arrive at this website. Hyperblam itself is used in the example pages and the API docs make up the elements pages.

Installation

To start with, you need to do 4 things:

  1. Grab and unzip the HYPERBLAM code (or clone the repository itself)
  2. Grab some samples
  3. Make a webpage (a file ending in .html)
  4. Point the webpage at the hyperblam.js file like so:
    <!-- rest of the web page up here ↑ -->
    <script type="module" src="path/to/hyperblam.js"></script>
</body>

This /hyperblam.js script will look for HYPERBLAM elements in the page and bring them to life. Elements that aren’t used aren’t installed.

A web page has some JavaScript injected into its foot and it explodes with loud sounds from its center.

All set! Now take a look at the other guides—or head over to see some live examples I’ve been messing around with.