The drum kit uses the free source code for the Midi drums Github project by Chris Rogers and Ken Moore to which I've added a few extra sounds such as cowbell, claves and frog block. Included as a way to add sounds to the metronome. The drum machine is not connected with the metronome. You can try the original here and get the source code for your own projects here. I haven't changed anything except to add those extra sounds.

If you unselect "Add reverb and pitch changes" then the code uses the Sounds.js library to play the sounds instead (playing the same samples in a different way).

The Simple audio check box when selected uses a much simpler approach compatible with earlier browsers. It creates audio elements using

audio=new Audio(source);
audio.volume=volume;
audio.play();

if already playing it uses

audio.pause();

and it alternates between two duplicate audio elements for each ballin order to have no delay between pausing and playing the next sound.

The bounce animation is based on this tutorial and this code example. It is animated entirely in css. This means that it is browser optimized more than is usually possible in javascript. The browser handles skipping frames without impacting on the clock. The notes are played in response to event listeners - this means that it doesn't use the Javascript scheduling, which is not a very robust way of timing notes. Instead it uses whatever clock the browser is using in its source code. If there is too much load on the computer for some reason, then it skips beats but the notes it does play continue to be reasonably in time in my testing - preferred behaviour for a metronome rather than delaying notes.

You can enter expressions such as ratios, powers etc into most of the text fields. To parse these the code uses Peter Olsen's code example How to write a simple interpreter in JavaScript to which I just added support for the golden ratio as an extra constant ϕ in evaluator.js. I needed to use a custom expression evaluator becuase the Javascript eval() routine is considered unsafe, and could potentlially make this website vulnerable to hackers.

The

(mid edit)

The backgrounds are

I have duplicated them with their mirror images to make a seamless background if the user has a very wide screen or spread over two monitors etc.

The sounds are the ones included with the Midi drums github project to which I've added:

You can also use this as a web page for free here.

(screenshot of this page for social media sharing preview)