@werckmeister/components 1.1.6-162 → 1.1.6-164
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -1
- package/package.json +2 -2
- package/werckmeister.wasm +0 -0
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
# werckmeister-component
|
|
1
|
+
# 🎼 werckmeister-component
|
|
2
2
|
|
|
3
3
|
A [web component](https://en.wikipedia.org/wiki/Web_Components) which allows you to embed werckmeister snippets on your website.
|
|
4
4
|
|
|
5
5
|
## How to use
|
|
6
6
|
|
|
7
|
+
### snippet
|
|
7
8
|
* include the javascript file
|
|
8
9
|
|
|
9
10
|
```html
|
|
@@ -55,3 +56,87 @@ Set the repo url. See [Soundfont Server](https://github.com/werckme/soundfont-se
|
|
|
55
56
|
|
|
56
57
|
### `wm-workspace-url`
|
|
57
58
|
Uses a workspace url as source. E.g.: "https://sambag.uber.space/api-wm/conductor16thHighHat"
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### workspace
|
|
62
|
+
#### Using `<werckmeister-workspace>` to use several editors (for example in different tabs)
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🔌 Step 1: Include the Component Script
|
|
67
|
+
|
|
68
|
+
Add the Werckmeister Components script to your HTML:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<script src="https://unpkg.com/@werckmeister/components/werckmeister-components.js"></script>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## 🧱 Step 2: Add a `<werckmeister-workspace>` and Editor
|
|
77
|
+
|
|
78
|
+
Define a workspace `<werckmeister-editor>`. Each editor can contain a werckmeister document.
|
|
79
|
+
|
|
80
|
+
Example:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<werckmeister-workspace id="workspace"></werckmeister-workspace>
|
|
84
|
+
|
|
85
|
+
<werckmeister-editor
|
|
86
|
+
id="ed1"
|
|
87
|
+
wm-filename="main.sheet"
|
|
88
|
+
wm-style="height: 700px;"
|
|
89
|
+
>
|
|
90
|
+
using "chords/default.chords";
|
|
91
|
+
|
|
92
|
+
tempo: 140;
|
|
93
|
+
device: MyDevice webPlayer _useFont="FluidR3-GM";
|
|
94
|
+
instrumentDef:lead _onDevice=MyDevice _ch=0 _pc=0;
|
|
95
|
+
instrumentDef:rhythm _onDevice=MyDevice _ch=1 _pc=0;
|
|
96
|
+
instrumentDef:bass _onDevice=MyDevice _ch=2 _pc=0;
|
|
97
|
+
|
|
98
|
+
-- melody track
|
|
99
|
+
[
|
|
100
|
+
instrument: lead;
|
|
101
|
+
{
|
|
102
|
+
\p
|
|
103
|
+
r4 e f# g | c'1~ | c'4 d e f# | b2 b2~ |
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
</werckmeister-editor>
|
|
107
|
+
|
|
108
|
+
<a href id="download">Download MIDI</a>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## ⚙️ Step 3: Register the Editor in JavaScript
|
|
114
|
+
|
|
115
|
+
Link your editor to the workspace using JavaScript:
|
|
116
|
+
|
|
117
|
+
```js
|
|
118
|
+
const workspace = document.getElementById('workspace');
|
|
119
|
+
workspace.registerEditor(document.getElementById('ed1'));
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
You can also hook into events:
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
workspace.onError = (ex) => console.log("Error:", ex);
|
|
126
|
+
workspace.onCompiled = (doc) => console.log("Compiled successfully:", doc);
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## 🎵 MIDI Export
|
|
132
|
+
|
|
133
|
+
To trigger MIDI file download after compilation:
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
const downloadEl = document.querySelector("#download");
|
|
137
|
+
downloadEl.onclick = (ev) => {
|
|
138
|
+
ev.preventDefault();
|
|
139
|
+
workspace.download("myFile.mid");
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@werckmeister/components",
|
|
3
|
-
"version": "1.1.6-
|
|
3
|
+
"version": "1.1.6-164",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "werckmeister-components.js",
|
|
6
6
|
"scripts": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@types/codemirror": "0.0.98",
|
|
32
32
|
"@types/lodash": "^4.14.164",
|
|
33
|
-
"@werckmeister/compilerjs": "^1.4.5-
|
|
33
|
+
"@werckmeister/compilerjs": "^1.4.5-927",
|
|
34
34
|
"@werckmeister/language-features": "1.0.0-76",
|
|
35
35
|
"@werckmeister/midiplayer": "1.0.2-43",
|
|
36
36
|
"babel-core": "^6.26.3",
|
package/werckmeister.wasm
CHANGED
|
Binary file
|