npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-chromatone

v3.0.1

Published

Visual music language theory and practice toolbox

Downloads

269

Readme

Chromatone

Chomatone logo in a shape of 12 petals flower, each having it's own distinct colors 30 degrees of hue apart. Each one also is white and black as 12 piano keys in an octave from A to G#. Starting from red A it goes to orange A#, yellow B, lime C and then all around the circle with cyan D# and purple G back to red A.

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

NPM Version and link to npmjs.com

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

NPM Version and link to npmjs.com

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

  • 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

  • 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