https://github.com/k-l-lambda/web-widgets
A package contains some utility vue.js components.
https://github.com/k-l-lambda/web-widgets
Last synced: 4 months ago
JSON representation
A package contains some utility vue.js components.
- Host: GitHub
- URL: https://github.com/k-l-lambda/web-widgets
- Owner: k-l-lambda
- Created: 2020-02-25T06:22:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2026-02-11T07:47:11.000Z (5 months ago)
- Last Synced: 2026-02-11T15:13:51.635Z (5 months ago)
- Language: TypeScript
- Size: 2.02 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Music Widgets
A package contains some music utility modules.
## Modules
* MIDI
* MusicNotation
* MidiPlayer
* MidiAudio
## Usage
Install (via GitHub Packages registry):
1) Authenticate npm to GitHub registry (once per machine):
```
// ~/.npmrc
@k-l-lambda:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
always-auth=true
# Alternatively (npm >= 6)
# npm login --registry=https://npm.pkg.github.com --scope=@k-l-lambda
```
2) Install the package:
```
yarn add @k-l-lambda/music-widgets
# or
npm install @k-l-lambda/music-widgets
```
In Node:
```
import { MIDI, MusicNotation, MidiPlayer, MidiUtils } from "@k-l-lambda/music-widgets";
// Parse a MIDI ArrayBuffer
const midi = MIDI.parseMidiData(arrayBuffer);
const notation = MusicNotation.Notation.parseMidi(midi);
const player = new MidiPlayer(midi, {
onMidi: (event, when) => {/* route to synth */},
});
player.play();
```
In Browser (UMD):
```
const { MIDI, MusicNotation, MidiPlayer, MidiAudio } = window.musicWidgetsBrowser;
// ...
```
Vue component (piano roll):
```
import { MidiRoll } from "@k-l-lambda/music-widgets";
export default { components: { MidiRoll } };
```
## Development
Prerequisites:
- Node.js (LTS)
- Yarn
Install deps:
```
yarn
```
Build library and browser bundle:
```
yarn build
```
Watch mode (TS + bundle):
```
yarn watch
```
Test app (midi-visualizer):
```
cd tests/midi-visualizer
yarn
yarn serve
# optional: in another terminal, sync parent outputs into node_modules
yarn watch
```
## Publish to GitHub Packages
The package publishes to the GitHub Packages registry at `https://npm.pkg.github.com`.
1) Ensure you are authenticated (create a Personal Access Token with `read:packages`, `write:packages` (and `delete:packages` if needed)):
```
// ~/.npmrc
@k-l-lambda:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
always-auth=true
```
2) Update version in `package.json`.
3) Build the package (includes TS compile, lib sync, UMD bundle):
```
yarn build
```
4) Publish:
```
npm publish
# or (yarn classic delegates to npm publish)
yarn publish --new-version
```
Notes:
- The build will emit `lib/` (compiled TS + MidiAudio) and `dist/` (UMD bundle).
- Ensure `.npmrc` points the `@k-l-lambda` scope to the GitHub registry and `always-auth=true`.
- Package name must be scoped to the owner (`@k-l-lambda/music-widgets`) and you must have permission in that org/owner.
- In CI, prefer `NODE_AUTH_TOKEN`/`NPM_TOKEN` env var matching the `_authToken` used in `.npmrc`.