use-chromatone
v2.9.6
Published
Visual music language theory and practice toolbox
Downloads
511
Maintainers
Readme
Chromatone
Visual Music Language
Independent open-source research project that uses colors and shapes on the screen to learn, play and communicate notes and rhythms from the speakers.
Theory
Cards and short overviews on physics and physiology of vision and hearing and their intersection at visual music research, exploration, practice and self expression.
Practice
Useful tools to have in the pocket like a pack of interactive cards to learn and use in everyday music practice. These are open source web-experiments with different aspects of sound and color.
Use-chromatone package
A 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 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.
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!
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