Skip to main content
Home
Browse packagesDocsSign in
This release is 8 versions behind 9.0.0 — the latest version of @musodojo/enharmonic-note-selector. Jump to latest

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

conor-dowdall/enharmonic-note-selector

A web component for selecting common spellings of enharmonic notes and dispatching an event with the selected note's name and integer.

This package works with Node.js, Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Bun
It is unknown whether this package works with Cloudflare Workers
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 months ago (7.1.5)

Enharmonic Note Selector Web Component

enharmonic-note-selector is a custom HTML element that allows users to select a musical note (e.g., "C", "B♯", "D♯", "E♭") from a dialog and dispatch a custom event.

  • displays a button which opens a dialog containing all enharmonic equivalents for each pitch, including up to double sharps and flats.
  • ability to limit choice to common root notes only.
  • dispatches an event with the note name and note integer in the details.

npm version npm downloads JSR score

Bundle

Create the dist/bundle.js file for the example

Deno

deno task bundle

Node

npm run bundle

See examples/example1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Enharmonic Note Selector Example</title>
    <script type="module" src="../dist/bundle.js"></script>
  </head>
  <body>
    <h1>Enharmonic Note Selector</h1>
    <enharmonic-note-selector
      selected-note-name="C♯"
    ></enharmonic-note-selector>

    <script type="module">
      const selector = document.querySelector("enharmonic-note-selector");

      selector.addEventListener("enharmonic-note-selected", (e) => {
        console.log("Note name:", e.detail.noteName);
        console.log("Note integer:", e.detail.noteInteger);
      });
    </script>
  </body>
</html>

Features

  • Enharmonic Note Selection: Provides a user-friendly interface for choosing a specific enharmonic spelling.
  • Customizable Appearance: Supports theming via CSS custom properties, allowing you to control the colors underlining each note / pitch-class.
  • Event Handling: Dispatches an enharmonic-note-selected event when the user makes a selection, providing the selected note name and note integer.
  • Attributes and Properties:
    • selected-note-name attribute: Sets the initially selected note name.
    • selectedNoteName property: Gets or sets the selected note name.
    • selectedNoteInteger property (read-only): Gets the integer representation of the selected note (0-11).
    • noteColorGroup property: Sets an array of 12 color strings for theming.
    • root-notes-only attribute: A boolean attribute that, when present, restricts the selection to only standard root notes.
  • Random Selection: Includes a public method to programmatically select a random note.

Styling with CSS Custom Properties

The component's appearance can be customized in several ways.

Customizing Icons with Slots

You can replace the default icons for the main button and the close button using HTML slots.

  • Main Button Icon: Provide an element (like an <img> or <svg> or even <p>Choose A Note</p>) directly inside the <enharmonic-note-selector> tag. This will replace the default musical note icon that appears when no note is selected.

  • Close Button Icon: To replace the 'X' icon in the dialog, add an element with the attribute slot="close-icon".

<enharmonic-note-selector>
  <!-- This SVG replaces the default main button icon -->
  <svg><!-- your custom svg --></svg>

  <!-- This SVG replaces the default close icon in the dialog -->
  <svg slot="close-icon"><!-- your custom svg --></svg>
</enharmonic-note-selector>

Sizing and Padding using ::part()

The main button inside the component is exposed via a shadow part named main-button. This allows you to directly style its padding, font, and other properties from your global stylesheet. This is the recommended way to control the component's size and internal spacing.

enharmonic-note-selector::part(main-button) {
  border: 1px solid currentColor;
  border-radius: 0.6em;
  padding: 0.3em 1em;
}

enharmonic-note-selector::part(main-button):hover {
  background-color: color-mix(in srgb, currentColor 20%, transparent 80%);
}

Adding Note Colors

  • --note-color-0: Color for pitch 0 (C)
  • --note-color-1: Color for pitch 1 (C#/Db)
  • --note-color-2: Color for pitch 2 (D)
  • --note-color-3: Color for pitch 3 (D#/Eb)
  • --note-color-4: Color for pitch 4 (E)
  • --note-color-5: Color for pitch 5 (F)
  • --note-color-6: Color for pitch 6 (F#/Gb)
  • --note-color-7: Color for pitch 7 (G)
  • --note-color-8: Color for pitch 8 (G#/Ab)
  • --note-color-9: Color for pitch 9 (A)
  • --note-color-10: Color for pitch 10 (A#/Bb)
  • --note-color-11: Color for pitch 11 (B)

You can set these properties in your CSS to override the default colors. For example, to use a custom color scheme:

enharmonic-note-selector {
  --note-color-0: #ff0000; /* Red for C */
  --note-color-1: #ff7f00; /* Orange for C# */
  --note-color-2: #ffff00; /* Yellow for D */
  --note-color-3: #7fff00; /* Chartreuse for D# */
  --note-color-4: #00ff00; /* Green for E */
  --note-color-5: #00ff7f; /* Spring Green for F */
  --note-color-6: #00ffff; /* Cyan for F# */
  --note-color-7: #007fff; /* Azure for G */
  --note-color-8: #0000ff; /* Blue for G# */
  --note-color-9: #7f00ff; /* Violet for A */
  --note-color-10: #ff00ff; /* Magenta for A# */
  --note-color-11: #ff007f; /* Rose for B */
}
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";