webmscore
MuseScore's libmscore (the core library) in WebAssembly!
Features
- Parse
mscz
file data - Get score metadata
- Generate music sheets in SVG/PNG/PDF formats
- Generate MIDI
- Export as MusicXML compressed/uncompressed
- Generate position information of measures or segments on the generated sheets
- Run inside a Web Worker thread
Installation
The package is available on npm: https://www.npmjs.com/package/webmscore
npm i webmscore
Use webmscore
Load in browsers
<script src="https://cdn.jsdelivr.net/npm/webmscore/webmscore.js"></script>
<script>
WebMscore.ready.then(async () => {
const score = await WebMscore.load(name, msczdata)
})
</script>
For latest browsers which support ES Modules
import WebMscore from 'https://cdn.jsdelivr.net/npm/webmscore/webmscore.mjs'
Run in Node.js directly
Minimum version: v8.9.0 with ES Modules support
The --experimental-modules
flag is required for Node.js versions under 14,
Also require "type": "module"
in package.json
import WebMscore from 'webmscore'
WebMscore.ready.then(async () => {
const score = await WebMscore.load(name, msczdata)
})
Use a JavaScript bundler
(TBD)
Note:
Important!
Copy webmscore.lib.data
and webmscore.lib.wasm
to your artifact dir (the same directory as your final js bundle).
Compiling
-
Install essential tools like make
, cmake
, llvm
, etc.
-
Install emscripten
using emsdk
https://emscripten.org/docs/getting_started/downloads.html
-
Get and compile Qt5 for WebAssembly
CPUS=$(getconf _NPROCESSORS_ONLN 2>/dev/null || getconf NPROCESSORS_ONLN 2>/dev/null || 8)
QT_PATH=/usr/qt515/
git clone git://code.qt.io/qt/qt5.git --depth=1 -b 5.15.0 $QT_PATH
cd $QT_PATH
./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase
make -j$CPUS
- Compile
webmscore
make release
Build artifacts are in the web-public directory
Browser Support
All modern browsers which support WebAssembly and Async Functions
Name | Minimum Version |
---|
Chrome | 57 |
Firefox | 53, 52 (non-ESR) |
Edge | 16 (Fall Creators Update) |
Safari | 11 |
IE | NO! |
Other browsers | I don't know! |
Only tested on the latest version of Chrome and Firefox.
Examples
see files in the web-example directory
cd ./web-example
npm i
npm start
npm run start:browser
webmscore is part of the LibreScore project.