Skip to main content
Home
Browse packagesDocsSign in

@musodojo/enharmonic-note-selector@3.1.0
Built and signed on GitHub Actions

latest
conor-dowdall/enharmonic-note-selector

A web component for selecting common spellings of enharmonic notes, and providing access to the selected note's associated pitch integer.

This package works with Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
100%
Published
2 weeks ago (3.1.0)

A custom HTML element that allows users to select an enharmonic note.

This component displays a primary button which, when clicked, opens a modal dialog. The dialog presents a list of all enharmonic equivalents for each pitch class, allowing the user to select a specific note.

Key Features:

  • Interactive Display: Renders a clickable button displaying the currently selected note (or a default symbol).
  • Enharmonic Selection Dialog: Provides a comprehensive dialog for choosing any enharmonic note from all available pitch classes.
  • Theming Support: Allows customization of note-specific colors (e.g., for underlines) via CSS custom properties.
  • Event-Driven: Dispatches a custom event when a note is successfully selected, providing the note name and its corresponding pitch integer.
  • Programmatic Control: Exposes public properties for getting/setting the selected note's name and pitch integer.
  • Attribute Synchronization: Supports setting the initial selected note via an HTML attribute.
  • Random Selection: Includes a public method to programmatically select a random note, useful for demonstrations or practice applications.

Examples

Example 1

<enharmonic-note-selector selected-note-name="C"></enharmonic-note-selector>

Example 2

<style>
  enharmonic-note-selector {
    --note-color-0: #FF0000;
    --note-color-1: #FFA500;
    ...
  }
</style>
Built and signed on
GitHub Actions
View transparency log

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";
or

Import directly with a jsr specifier

import * as enharmonic_note_selector from "jsr:@musodojo/enharmonic-note-selector";

Add Package

pnpm i jsr:@musodojo/enharmonic-note-selector
or (using pnpm 10.8 or older)
pnpm dlx jsr add @musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";

Add Package

yarn add jsr:@musodojo/enharmonic-note-selector
or (using Yarn 4.8 or older)
yarn dlx jsr add @musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";

Add Package

vlt install jsr:@musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";

Add Package

npx jsr add @musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";

Add Package

bunx jsr add @musodojo/enharmonic-note-selector

Import symbol

import * as enharmonic_note_selector from "@musodojo/enharmonic-note-selector";