JAMS Touch
Five sound toys by JAMS

Quiet things to touch.

Tap, glide and listen. Each one runs full screen in your browser, installs to your home screen, and sounds best through headphones.

Touch anywhere to begin
Start here

Zen Touch

Touch the stones in a still pond and relax to soft binaural soundscapes.

  • Five stones
  • Six sound modes
  • Keys A D G J L
Open Zen Touch

Prism Pulse

Play a rainbow reflected on water over lofi and chill house binaural beats.

  • Six color notes
  • Kalimba & vibraphone
  • Snaps to the beat
Open Prism Pulse

Wildwood Valley

Play butterflies, ladybugs and wildflowers on weathered wood over acoustic folk and country grooves.

  • Folk moods
  • Photo cut-outs
  • Pull up a chair
Open Wildwood Valley

Flutter Kaleidoscope

A wall of illustrated butterflies that flap, startle and scatter when you touch them, move, or make a sound.

  • Touch
  • Camera motion
  • Microphone
Open Flutter

Rain Sounds

Gentle rain on still water, drifting light and shadow, soft thunder and chill house beats.

  • Rain ripples
  • Soft thunder
  • Endless mode
Open Rain Sounds
How it’s made

Built with what the browser already has.

Every app here is a single web page. There is nothing to download from a store. The sound is made on your device, and the things you touch are drawn by the browser.

HTML, CSS and JavaScriptAll five
The three core languages of the web. HTML describes what is on the page, CSS sets how it looks and moves, and JavaScript makes it respond to you. Source: MDN, Your first website
Web Audio APIAll five
A sound studio built into the browser. JavaScript creates tone generators (oscillators), sets their pitch and volume, and mixes them with the music and with the note you just touched. Sources: MDN, Web Audio API · MDN, OscillatorNode
Binaural beatsZen Touch · Prism Pulse
Each ear gets a steady tone at a slightly different pitch, and you hear the small difference between them as a slow pulse. The modes are named after the brainwave bands those pulse rates fall in: delta, theta, alpha, beta and gamma. It only works with headphones. Sources: Wikipedia, Binaural beats · Wikipedia, Neural oscillation
SVGZen Touch
Scalable Vector Graphics. Shapes are written as maths instead of pixels, so the stones stay sharp on any screen and can change shape smoothly when touched. Source: MDN, SVG
Pointer and keyboard eventsAll five
One set of browser signals covers a finger, a mouse and a pen, which is why a tap, a click and a glide across several notes all work the same way. Source: MDN, Pointer events
Camera and microphoneFlutter Kaleidoscope
With your permission, the browser shares live camera and microphone input with the page, so movement and sound can startle the butterflies. You can decline and play by touch alone. Source: MDN, getUserMedia()
Progressive Web AppAll five
A small manifest file tells your phone the app’s name, icon and colors so it can be added to the home screen and opened full screen. A service worker, a script that runs in the background, handles loading the app’s files. Sources: MDN, Progressive web apps · MDN, Web app manifest · MDN, Service Worker API