Spaghetti Audio combines the Web Audio API via Tone.js and an interactive canvas to let you draw and strum strings
The longer the string, the lower the pitch, just like an elastic band... or, erm, spaghetti?
On touch devices, draw strings with two fingers and strum with one
If Spaghetti Audio is exactly what you've been searching for, you too can enjoy the sonic taste of spaghetti sound waves by following these steps:
-
Install via npm or yarn
npm i spaghetti-audio
-
Create some spaghetti
import SpaghettiAudio from 'spaghetti-audio' const spaghettiAudio = new SpaghettiAudio() // All the spaghetti goodness is rendered to a canvas element, so append that to the DOM document.body.appendChild(spaghettiAudio.canvas)
-
To properly clean up Spaghetti Audio (e.g. when navigating to another page in a SPA) call the
destroymethod. This removes event listeners and cancels animation frame requests.spaghettiAudio.destroy()
Rather than sticking the spaghetti canvas straight in the <body> and taking up the full window width, you can attach it to another element. This example attaches the spaghetti canvas to a wrapper with id "spaghetti-wrapper".
import SpaghettiAudio from 'spaghetti-audio'
const wrapper = document.querySelector('#spaghetti-wrapper')
const spaghettiAudio = new SpaghettiAudio({ wrapper })
wrapper.appendChild(spaghettiAudio.canvas)Spaghetti Audio is UI framework agnostic and the mounting process is similar for React, Vue.js and other frameworks. You can think of Spaghetti Audio more like a game with a render loop rather than a reactive component. This means we need to instantiate it, attach it to a component and destroy it when that component unmounts. Here's how that looks in React:
function SpaghettiAudioWrapper() {
const wrapperRef = useRef()
useEffect(() => {
const spaghettiAudio = new SpaghettiAudio({ wrapper: wrapperRef.current })
wrapperRef.current.appendChild(spaghettiAudio.canvas)
return () => spaghettiAudio.destroy()
}, [])
return <div className="spaghetti-wrapper" ref={wrapperRef} />
}-
Clone this repo and
cd spaghetti-audio -
Install dependencies with npm or yarn
npm i
-
Spin up the dev server
npm run start
-
The dev server is now running at http://localhost:8080
The following settings can be used to customise the spaghetti experience, use these when initialising spaghetti audio, e.g. new SpaghettiAudio({ damping: 0.05 })
export interface Settings {
/** How fast motion dies down. The higher the number, the less oscillation and more al dente the spaghetti. */
damping?: number
/** Show the hitboxes and other helpful debugger annotations on the canvas. */
debug?: boolean
/** The frequency range of the keyboard. */
hiRange?: { start: number; end: number }
/** The key to store the spaghetti strings under in local storage. */
localStorageKey?: string
/** It's spaghetti, not scialatelli, so let's set a minimum length. */
minStringLength?: number
/** The space around the spaghetti that's interactive. */
hitboxSize?: number
/** Spaghetti color. */
spaghettiColor?: string
/** Spaghetti width. */
spaghettiWidth?: number
/** The total interactive points along each spaghetti string. Minimum is 3 – Two anchor points on each end, and one interactive wobbly point in the middle. */
totalPoints?: number
/** How quickly the spaghetti oscillates back to center. The higher the number, the stickier or more molasses-like the spaghetti. */
viscosity?: number
/** Show a clear button to clear all the strings. */
withClearButton?: boolean
/** Store the spaghetti strings in local storage. */
withLocalStorage?: boolean
/** A HTML element, if the spaghetti canvas is attached to a wrapper. */
wrapper?: HTMLElement
}