Feature/fluidsynth (#6)

* midiplayer with fluidsynth support

* updated midiplayer version

* set parcel version fix to 1.12.3 due this bug:
parcel-bundler/parcel#5955

* midi player version up to 9

* midiplayer update

* buffersize, repo url options added

* midiplayer version updated

* * midipayer updated
* audio buffer size option removed

* unused code removed

* midiplayer updated

* midiplayer version updated

* midiplayer updated

* version updated

* deactivated source maps for dev scripts, because it fails to compile, due the js-synthesizer script is loaded using parcels fs process

* midi player version updated

* update test

* version updated

* midiplayer version updated

Co-authored-by: samba <samba@manjaro>

README.md

@@ -48,3 +48,6 @@ https://jsfiddle.net/aw702vcg/
 ### `wm-css-url`
 Set an url of an css file, to override the default css of the snippet.
 https://jsfiddle.net/y53647x8/
+
+### `wm-soundfont-url`
+Set the repo url. See [Soundfont Server](https://github.com/werckme/soundfont-server).

package.json

@@ -7,12 +7,13 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "parcel build --no-source-maps src/werckmeister-components.ts",
     "deploy": "rm -rf dist && npm run build && cp package.json dist && cp README.md dist",
-    "serve-snippet": "parcel test-snippet.html editor.css",
-    "serve-workspace": "parcel test-workspace.html editor.css"
+    "serve-snippet": "parcel --no-source-maps  test-snippet.html editor.css",
+    "serve-workspace": "parcel --no-source-maps test-workspace.html editor.css"
   },
   "staticFiles": {
     "staticPath": [
-      "./node_modules/@werckmeister/compilerjs"
+      "./node_modules/@werckmeister/compilerjs",
+      "./node_modules/@werckmeister/midiplayer"
     ],
     "watcherGlob": "*.wasm"
   },
@@ -30,7 +31,7 @@
     "@types/codemirror": "0.0.98",
     "@types/lodash": "^4.14.164",
     "@werckmeister/compilerjs": "^0.1.56-3",
-    "@werckmeister/midiplayer": "1.0.2-3",
+    "@werckmeister/midiplayer": "1.0.2-31",
     "babel-core": "^6.26.3",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^5.57.0",
@@ -43,6 +44,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
+    "parcel": "1.12.3",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-static-files-copy": "^2.5.0",
     "typescript": "^4.0.2"

src/components/snippet/Snippet.ts

@@ -229,13 +229,10 @@ export class Snippet extends HTMLElement {
 	async onPlayClicked(ev: MouseEvent) {
 		try {
 			await this.stopAllSippets();
-			this.playerIsFetching = true;
 			await this.startPlayer(ev);
 		} catch(ex) {
 			this.onError(ex.error);
 			return;
-		} finally {
-			this.playerIsFetching = false;
 		}
 	}
 
@@ -272,7 +269,6 @@ export class Snippet extends HTMLElement {
 			this.document = await WM_Compiler.compile(files);
 		} catch(ex) {
 			this.onError(ex.error);
-			this.playerIsFetching = true;
 			return;
 		}
 		this.snippetDocumentId = _(this.document.midi.sources)
@@ -282,7 +278,11 @@ export class Snippet extends HTMLElement {
 			console.error("werckmeister compiler could not assign main document")
 		}
 		WM_Player.tempo = this.document.midi.bpm;
-		await WM_Player.play(this.document.midi.midiData, ev, this.onMidiEvent.bind(this), this.onPlayerState.bind(this));
+		try {
+			await WM_Player.play(this.document.midi.midiData, ev, this.onMidiEvent.bind(this), this.onPlayerState.bind(this));
+		} finally {
+			this.playerIsFetching = false;
+		}
 	}
 
 	/**
@@ -409,6 +409,10 @@ export class Snippet extends HTMLElement {
 		const additionalSources = this.attributes.getNamedItem("wm-add-sources");
 		if (additionalSources) {
 			this._addSources = additionalSources.value;
-		}					
+		}
+		const soundfontRepoUrl = this.attributes.getNamedItem("wm-soundfont-url");
+		if (soundfontRepoUrl) {
+			WM_Player.setSoundfontRepoUrl(soundfontRepoUrl.value);
+		}						
 	}
 }

src/components/workspace/Workspace.ts

@@ -267,6 +267,10 @@ export class Workspace extends HTMLElement {
 		if (cssRefAttr) {
 			this.loadExternalCss(cssRefAttr.value);
 		}
+		const soundfontRepoUrl = this.attributes.getNamedItem("wm-soundfont-url");
+		if (soundfontRepoUrl) {
+			WM_Player.setSoundfontRepoUrl(soundfontRepoUrl.value);
+		}			
     }
 
     public registerEditor(editor: Editor) {

src/player/Player.ts

@@ -26,6 +26,7 @@ export class Player {
     private onMidiEvent: MidiEventCallback|null = null;
     private onPlayerStateChangedCallback: PlayerStateChangedCallback|null = null;
     private state: PlayerState = PlayerState.Stopped;
+    private repoUrl: string = null;
     /**
      * 
      * @param event 
@@ -36,6 +37,9 @@ export class Player {
             this._player.initAudioEnvironment(event);
             this._player.onMidiEvent = this.onEvent.bind(this);
             this._player.onPlayerStateChanged = this._onPlayerStateChanged.bind(this);
+            if (this.repoUrl) {
+                this._player.setRepoUrl(this.repoUrl);
+            }
         }
         return this._player;
     }
@@ -108,6 +112,13 @@ export class Player {
         this.state = PlayerState.Playing;
     }
 
+    setSoundfontRepoUrl(url: string) {
+        if(this._player) {
+            this._player.setRepoUrl(url);
+        } 
+        this.repoUrl = url;
+    }
+
     /**
      * 
      */

src/shared/player.ts

@@ -1,5 +1,8 @@
+import { PlayerState as _PlayerSate} from "@werckmeister/midiplayer";
+
 export enum PlayerState {
-    Playing,
-    Stopped,
-    Paused
-}
+    Stopped = _PlayerSate.Stopped,
+    Preparing = _PlayerSate.Preparing,
+    Playing = _PlayerSate.Playing,
+    Stopping = _PlayerSate.Stopping
+}

test-snippet.html

@@ -45,7 +45,7 @@
         wm-data="dXNpbmcgImNob3Jkcy9kZWZhdWx0LmNob3JkcyI7CnRlbXBvOiAxNDA7CmRldmljZTogTXlEZXZpY2UgIG1pZGkgX3VzZVBvcnQ9MDsKaW5zdHJ1bWVudERlZjpsZWFkICAgIF9vbkRldmljZT1NeURldmljZSAgX2NoPTAgX3BjPTA7Cmluc3RydW1lbnREZWY6cmh0eXRobSBfb25EZXZpY2U9TXlEZXZpY2UgIF9jaD0xIF9wYz0wOwppbnN0cnVtZW50RGVmOmJhc3MgICAgX29uRGV2aWNlPU15RGV2aWNlICBfY2g9MiBfcGM9MDsKCi0tIG1lbG9keSB0cmFjawpbCmluc3RydW1lbnQ6IGxlYWQ7CnsKICAgIFxmZmYKICAgIHI0IGUgZiMgZyAgfCBjJzF+ICAgICAgIHwgYyc0IGQgZSBmIyAgfCBiMiBiMn4gfCAKICAgIGI0IGMgZCBlICAgfCBhMX4gICAgICAgIHwgYTQgYiwgYyMgZCMgfCBnMSAgICAgfAogICAgcjQgZSBmIyBnICB8IGMnMX4gICAgICAgfCBjJzQgZCBlIGYjICB8IGIyIGIyfiB8IAogICAgYjQgYyBkIGUgICB8IGExfiAgICAgICAgfCBhNCBmIyBhIGcgICB8IGUxfiAgICB8CiAgICBlNCByIGQjIGUgIHwgZiMgYiwgZiMyfiB8IGYjNCBmIyBlIGYjIHwgZzF+ICAgIHwKICAgIGc0IGcgZiMgZyAgfCBhMX4gICAgICAgIHwgYTQgZCBkJyBjJyAgfCBiMX4gICAgfCAKICAgIGI0IHIgYSMgYiAgfCBjJyBjJyBhIGEgIHwgZiMyLiBjJzQgICAgfCBiMiBiMn4gfCAKICAgIGIyLiBlNCAgICAgfCBhMi4gZzQgICAgIHwgZiMyIGc0IGIsICAgfCAKICAgIGUxIAp9Cl0KCi0tIGFjY29tcCB0cmFjawpbCnR5cGU6IGFjY29tcDsKeyAgIAogICAgciAgICAgIHwgQS03ICAgIHwgRDcgICAgfCBHbWFqNyAgfCAKICAgIENtYWo3ICB8IEYjLTdiNSB8IEI3ICAgIHwgRS0gICAgIHwgCiAgICBFLSAgICAgfCBBLTcgICAgfCBENyAgICB8IEdtYWo3ICB8IAogICAgQ21hajcgIHwgRiMtN2I1IHwgQjcgICAgfCBFLSAgICAgfCAKICAgIEUtICAgICB8IEYjLTdiNSB8IEI3YjkgIHwgRS0gICAgIHwgCiAgICBFLSAgICAgfCBBLTcgICAgfCBENyAgICB8IEdtYWo3ICB8CiAgICBHbWFqNyAgfCBGIy03YjUgfCBCN2I5ICB8IEUtNyBBNyB8IAogICAgRC03IEc3IHwgRiMtN2I1IHwgQjdiOSAgfCBFLSAgICAgfAp9Cl0KCi0tIHRoZSB0ZW1wbGF0ZXMgZGVmaW5lcyB3aGF0IHRoZSBhY2NvbXAgdHJhY2sgaGFzIHRvIHBsYXkKWwp0eXBlOiB0ZW1wbGF0ZTsKbmFtZTogbXlBY2NvbXA7Cmluc3RydW1lbnQ6IHJodHl0aG07CnsKICAgIFxwCiAgICA8SUlJLCBWLCBWSUksIElJPjEgfCAKfQpdCgpbCnR5cGU6IHRlbXBsYXRlOwpuYW1lOiBteUFjY29tcDsKaW5zdHJ1bWVudDogYmFzczsKewogICAgXHAKICAgIEksLDIuIFYsLDQgfAp9Cl0=">
     </werckmeister-snippet>
 
-    <werckmeister-snippet wm-add-sources="W3sicGF0aCI6ImNvbXBpbmcudGVtcGxhdGUiLCJkYXRhIjoiW1xudHlwZTogdGVtcGxhdGU7XG5uYW1lOiBteUFjY29tcDtcbmluc3RydW1lbnQ6IHJodHl0aG07XG57XG4gICAgXFxwXG4gICAgPElJSSwgViwgVklJLCBJST4xIHwgXG59XG5dXG5cbltcbnR5cGU6IHRlbXBsYXRlO1xubmFtZTogbXlBY2NvbXA7XG5pbnN0cnVtZW50OiBiYXNzO1xue1xuICAgIFxccFxuICAgIEksLDIuIFYsLDQgfFxufVxuXSJ9XQ=="
+    <werckmeister-snippet wm-audiobuffer-size="1024" wm-add-sources="W3sicGF0aCI6ImNvbXBpbmcudGVtcGxhdGUiLCJkYXRhIjoiW1xudHlwZTogdGVtcGxhdGU7XG5uYW1lOiBteUFjY29tcDtcbmluc3RydW1lbnQ6IHJodHl0aG07XG57XG4gICAgXFxwXG4gICAgPElJSSwgViwgVklJLCBJST4xIHwgXG59XG5dXG5cbltcbnR5cGU6IHRlbXBsYXRlO1xubmFtZTogbXlBY2NvbXA7XG5pbnN0cnVtZW50OiBiYXNzO1xue1xuICAgIFxccFxuICAgIEksLDIuIFYsLDQgfFxufVxuXSJ9XQ=="
     wm-def="dXNpbmcgImNob3Jkcy9kZWZhdWx0LmNob3JkcyI7DQp1c2luZyAiY29tcGluZy50ZW1wbGF0ZSI7DQp0ZW1wbzogMTQwOw0KZGV2aWNlOiBNeURldmljZSAgbWlkaSBfdXNlUG9ydD0wOw0KaW5zdHJ1bWVudERlZjpsZWFkICAgIF9vbkRldmljZT1NeURldmljZSAgX2NoPTAgX3BjPTA7DQppbnN0cnVtZW50RGVmOnJodHl0aG0gX29uRGV2aWNlPU15RGV2aWNlICBfY2g9MSBfcGM9MDsNCmluc3RydW1lbnREZWY6YmFzcyAgICBfb25EZXZpY2U9TXlEZXZpY2UgIF9jaD0yIF9wYz0wOw0K">
 <![CDATA[[
 {