Touchbit

You can use Touchbit directly at touchbit.xyz.

Touchbit is an interactive web application for exploring, editing, and visualizing musical expressions generated by ByteBeat-style algorithms. It allows users to experiment with audio synthesis, visualize waveforms, and easily share their creations.

Touchbit is fully optimized for mobile devices, providing a smooth and responsive experience on smartphones and tablets as well as desktop.

Main Features

• ByteBeat Expression Editor: Modify and test mathematical formulas to generate algorithmic music in real time.
• Audio Visualizers: Graphically display the waveform and spectrum of generated expressions.
• Preset Management and Saving: Save, load, and share your favorite expressions.
• Modern, Responsive Interface: Built with Vue 3, Vite, and TailwindCSS, designed for mobile devices.
• Interactive Panels: Tools for editing parameters, visualizing results, and navigating between different usage modes.
• Collaboration and Streaming Support: Share sessions and view creations in real time.

Who is Touchbit for?

Touchbit is designed for musicians, programmers, digital audio enthusiasts, and anyone interested in algorithmic synthesis and sound experimentation.

Technologies Used

• Vue 3 + Vite
• TailwindCSS
• Pinia for state management
• Milkdown for markdown editing
• PeerJS for real-time collaboration

Installation and Usage

Clone the repository and run:

yarn
yarn dev

Open http://localhost:5173 in your browser to start exploring Touchbit.

Testing and Development

Includes unit tests (Vitest) and end-to-end tests (Cypress). See the scripts in package.json for more details.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

yarn

Compile and Hot-Reload for Development

yarn dev

Compile and Minify for Production

yarn build

Run Unit Tests with Vitest

yarn test:unit

Run End-to-End Tests with Cypress

yarn test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

yarn build
yarn test:e2e