A piano keyboard that reads sargam as well as C D E.

<cg-keyboard> is a web component for music learning apps. It labels keys in Western notes or sargam, limits play to a scale or raag, lights keys in time with a melody, and plays three synthesised instruments with no audio files.

npm install @chordialguy/keyboard lit

Sa Play a key

Add it to a page

With a bundler

Importing the package registers <cg-keyboard> and <cg-swara>. Lit is a peer dependency, so your app and the keyboard share one copy.

JavaScript

import '@chordialguy/keyboard';
import { playNote } from '@chordialguy/keyboard';

Without one

A single classic script with Lit bundled in. It registers both elements and puts the functions on window.ChordialGuyKeyboard.

HTML

<script src="https://cdn.jsdelivr.net/npm/@chordialguy/keyboard@1/dist/chordialguy-keyboard.iife.js"></script>
<cg-keyboard from="C3" to="B4"></cg-keyboard>

Examples

Each demo runs the code shown under it.