ngx-score - Utility to view (and edit) music scores written in musicXML, abc notation or Vex-style provided as an Angular module.
Demo
View all the directives in action at https://bohoffi.github.io/ngx-score
Dependencies
- Angular (requires Angular 4 or higher, tested with 4.1.0)
- vexflow (requires Angular 1.2.83 or higher, tested with 1.2.83)
Installation
Install above dependencies via npm.
Now install ngx-score
via:
npm install --save ngx-score
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-score
:
map: 'ngx-score': 'node_modules/ngx-score/bundles/ngx-score.umd.js'
Once installed you need to import the main module:
;
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxScoreModule.forRoot()
):
; @
Other modules in your application can simply import NgxScoreModule
:
; @
Usage
Tokenizer
Initializing a tokenizer is as easy as initializing a string variable:
; ;
Methods
parse(input: any): any
: Parses the given input using the rules defined by the tokenizer typegetType(): TokenizerType
: returns the type of the tokenizer
Example
; ;;
Renderer
Initializing the renderer is damn easy too
; // creating the tokenizer; // creating the rendering container;;container.appendChildcanvas; ;
Methods
render(data: any): void
: renders the given data in the given container
Example
; // creating the tokenizer; // creating the rendering container;;container.appendChildcanvas; // creating the renderer; // parsing; // renderingrenderer.renderresult;
License
Copyright (c) 2017 bohoffi. Licensed under the MIT License (MIT)