use-chromatone

Chromatone

Visual Music Language

Independent open-source research project to use colors, shapes and motion to learn, play and communicate melody, harmony and rhythms in live music performance environment.

Open digital garden

Theory

Scientific research on many aspects of music theory as cards and short overviews on physics and physiology of vision and hearing and their intersection at visual music research, exploration, practice and self expression.

Visual Music Theory

Practice

Progressive web-apps as useful tools to have in a pocket to learn and use in everyday music practice. These are open source web-experiments with various interactive combinations of sounds and colors.

Visual Music Practice

Use-chromatone package

I'm maintaining an open-source collection of sound analysis and synthesis tools along with other useful media instruments to experiment with. All in a form of convenient NPM package you can use in any JS project, both SSR and client-side. Ideal tool for modern audio researchers, educators and their students as we abstract all the low level details into simple building blocks that can be used for prototyping and concept verification.

Chromatone composables

Chromatone database package

We collect all the musical knowledge we can get so then we can build new insights on top of this pile. Lists of intervals, chords and scales, rhythmic patterns from different cultures and more data, neatly stored in YAML format and provided to be used as a standalone NPM package with treeshaking enabled.

Music Database

TECH STACK

JS UI

• Vite - Next generation frontend tooling for fast development and building

  • unplugin-vue-components - On-demand components auto-importing for Vue
  • unplugin-icons - Access thousands of icons as Vue components on-demand
  • Icônes - Icon explorer with instant searching and SVG downloading
  • Vitepress - Vue-powered static site generator

• Vue 3 - Progressive JavaScript framework for building user interfaces

  • VueUse - Collection of essential Vue Composition Utilities
  • VueUse/Gesture - Vue Composables making your app interactive with gestures
  • Floating Vue - Tooltips, dropdowns, and popovers made easy for Vue

• UnoCSS - Instant on-demand atomic CSS engine

• Pug - Templating engine for concise HTML

Graphics

• colord - Tiny color manipulation and conversion library
• PaperJs - Vector graphics scripting framework
• simplex-noise - Simplex noise implementation for JavaScript
• hydra-synth - Livecoding networked visuals in the browser

Music

• TonalJs - Music theory library for JavaScript
• AbcJs - JavaScript library for rendering music notation
• WebMidi.js - Web MIDI API wrapper for easy MIDI device interaction

Audio

• Tone.js - Framework for creating interactive music in the browser

  • @tonejs/midi - Convert MIDI into Tone.js-friendly JSON

• Meyda - Audio feature extraction library for JavaScript

• AubioJs - WebAssembly port of Aubio, a library for audio analysis

• audiomotion-analyzer - High-resolution real-time audio spectrum analyzer

• Elementary audio - WebAssembly-powered audio engine for sound synthesis and analysis

• RecordRTC - WebRTC JavaScript library for audio/video/screen recording

• TODO:

  • https://baianat.github.io/leaps/reveal.html#example
  • https://vuexyz.org/primitives/useArc.html

Codesandbox

You can instantly fork and start editing your own copy of the whole web-app with this link. So if you want to edit some small imperfection or adjust any parameter of any of components - your are welcome to use Chromatone repo as a playground for your own ideas. And we would be glad to merge your contributions too!

Edit repo on Codesandbox

TBD

• Tauri desktop build
  • https://github.com/NicolaSpadari/nuxtor
  • https://github.com/ZaneH/piano-trainer/blob/master/src-tauri/Cargo.toml
  • https://www.youtube.com/watch?v=RFFSYgdeczw
  • https://github.com/ruohki/tauri-midi-example/blob/main/src-tauri/src/main.rs
• Popover panels
  • https://caniuse.com/?search=popover
  • https://frontendmasters.com/blog/popovers-work-pretty-nicely-as-slide-out-drawers/
  • https://caniuse.com/css-text-wrap-balance