@werckmeister/components 1.1.6-17 → 1.1.6-170

package/IMidiEvent.d.ts

@@ -0,0 +1,18 @@
+export declare const MidiEventTypes: {
+    NoteOn: number;
+    NoteOff: number;
+    Pc: number;
+    Cc: number;
+    PitchBend: number;
+};
+export interface IMidiEvent {
+    type: number;
+    noteName?: string;
+    channel: number;
+    track: number;
+    param1: number;
+    param2?: number;
+    playTime: number;
+    pitchbendValue?: number;
+    absPositionTicks?: number;
+}

package/README.md

@@ -1,13 +1,14 @@
-# werckmeister-component
+# 🎼  werckmeister-component
 
 A [web component](https://en.wikipedia.org/wiki/Web_Components) which allows you to embed werckmeister snippets on your website.
 
 ## How to use
 
+### snippet
 * include the javascript file
 
 ```html
-<script src="https://unpkg.com/werckmeister-components@~1.0.0/werckmeister-components.js"></script>
+<script src="https://unpkg.com/@werckmeister/components@1.1.6-41/werckmeister-components.js"></script>
 ```
 * embed your snippet
 
@@ -29,7 +30,8 @@ instrument: lead;
 ```
 
 ## Demo
-https://jsfiddle.net/o8tq4ghp/
+https://jsfiddle.net/z8qv5b7j/
+
 
 ## Options
 
@@ -37,14 +39,121 @@ https://jsfiddle.net/o8tq4ghp/
 can be either `default` or `single`. `single` means that the input is treated as one singe voice line such as `c d e f g`.
 In `default`mode the input has to be a valid `werckmeister` source.
 
-https://jsfiddle.net/6dmoun41/
+https://jsfiddle.net/bh4ugc5q/
 
 ### `wm-tempo`
 Set the tempo of an snippet.
 ### `wm-style`
 Inline css rules to set up the apperance of the snippet.
-https://jsfiddle.net/aw702vcg/
+https://jsfiddle.net/zxhgyv2p/
 
 ### `wm-css-url`
 Set an url of an css file, to override the default css of the snippet.
-https://jsfiddle.net/y53647x8/
+https://jsfiddle.net/m01bzg3f/
+
+### `wm-soundfont-url`
+Set the repo url. See [Soundfont Server](https://github.com/werckme/soundfont-server).
+
+### `wm-workspace-url`
+Uses a workspace url as source. E.g.: "https://sambag.uber.space/api-wm/conductor16thHighHat"
+
+
+### workspace
+#### Using `<werckmeister-workspace>` to use several editors (for example in different tabs)
+
+---
+
+## 🔌 Step 1: Include the Component Script
+
+Add the Werckmeister Components script to your HTML:
+
+```html
+<script src="https://unpkg.com/@werckmeister/components/werckmeister-components.js"></script>
+```
+
+---
+
+## 🧱 Step 2: Add a `<werckmeister-workspace>` and Editor
+
+Define a workspace `<werckmeister-editor>`. Each editor can contain a werckmeister document.
+
+Example:
+
+```html
+<werckmeister-workspace id="workspace"></werckmeister-workspace>
+
+<werckmeister-editor
+  id="ed1"
+  wm-filename="main.sheet"
+  wm-style="height: 700px;"
+>
+using "chords/default.chords";
+
+tempo: 140;
+device: MyDevice webPlayer _useFont="FluidR3-GM";
+instrumentDef:lead _onDevice=MyDevice _ch=0 _pc=0;
+instrumentDef:rhythm _onDevice=MyDevice _ch=1 _pc=0;
+instrumentDef:bass _onDevice=MyDevice _ch=2 _pc=0;
+
+-- melody track
+[
+instrument: lead;
+{
+    \p
+    r4 e f# g | c'1~ | c'4 d e f# | b2 b2~ |
+}
+]
+</werckmeister-editor>
+
+<a href id="download">Download MIDI</a>
+```
+
+---
+
+## ⚙️ Step 3: Register the Editor in JavaScript
+
+Link your editor to the workspace using JavaScript:
+
+```js
+const workspace = document.getElementById('workspace');
+workspace.registerEditor(document.getElementById('ed1'));
+```
+
+You can also hook into events:
+
+```js
+workspace.onError = (ex) => console.log("Error:", ex);
+workspace.onCompiled = (doc) => console.log("Compiled successfully:", doc);
+```
+
+---
+
+## 🎵 MIDI Export
+
+To trigger MIDI file download:
+
+```js
+const downloadEl = document.querySelector("#download");
+downloadEl.onclick = (ev) => {
+    ev.preventDefault();
+    workspace.download("myFile.mid");
+}
+```
+
+## worskapce Options
+### wm-css-url
+Load a custom CSS file to override the default styling of the editor.
+
+### wm-soundfont-url
+Set the repo url. See [Soundfont Server](https://github.com/werckme/soundfont-server).
+
+### wm-onerror
+sets an error callback
+
+## Editor options
+### wm-style
+sets the style content to the underlying editor component
+### wm-css-url
+Load a custom CSS file to override the default styling of the editor.
+### wm-filename
+Defines a filename for the editor file. This file is accessable for the compiler.

package/index.d.ts

@@ -0,0 +1,61 @@
+import { IMidiEvent } from "./IMidiEvent";
+import { ISoundFont } from './SfCompose';
+export declare enum PlayerState {
+    Stopped = 0,
+    Preparing = 1,
+    Playing = 2,
+    Stopping = 3
+}
+export interface Task {
+    id: string;
+    name: string;
+}
+export interface TaskVisitor {
+    newTasks(tasks: Task[]): any;
+    done(task: Task): any;
+    message?(text: string, title?: string): any;
+}
+export declare class WerckmeisterMidiPlayer {
+    private static instaces;
+    private instanceId;
+    private _playerState;
+    playedTime: number;
+    midifile: any;
+    private audioContext;
+    private events;
+    onPlayerStateChanged: (oldState: PlayerState, newState: PlayerState) => void;
+    onMidiEvent: (event: IMidiEvent) => void;
+    private sfComposer;
+    private _sfRepository;
+    private neededInstruments;
+    private midiBuffer;
+    soundFont: ISoundFont;
+    private soundFontHash;
+    repoUrl: string;
+    private audioNodes;
+    rendererBufferSeconds: number;
+    gain: number;
+    constructor();
+    get ppq(): number;
+    hasEvents(): boolean;
+    private getSfRepository;
+    get playerState(): PlayerState;
+    set playerState(newState: PlayerState);
+    initAudioEnvironment(event: Event): Promise<void>;
+    private convertEvent;
+    private preprocessEvents;
+    private instrumentHash;
+    private instrumentsHash;
+    private getSoundfont;
+    private currentTaskVisitor;
+    load(base64MidiFileData: string, taskVisitor?: TaskVisitor | undefined): Promise<void>;
+    play(): Promise<void>;
+    stop(): void;
+    private postWebworker;
+    private startPlayback;
+    setRepoUrl(url: string): void;
+    /**
+     * fires the midi events parallel to the playback
+     */
+    private startEventNotification;
+}