Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
MuseScore's libmscore in WebAssembly! Read mscz data, and generate audio/MIDI/MusicXML/SVG/PNG/PDF sheets right in browsers
MuseScore's libmscore (the core library) in WebAssembly!
mscz
file dataThe package is available on npm: https://www.npmjs.com/package/webmscore
npm i webmscore
<!-- using a CDN -->
<script src="https://cdn.jsdelivr.net/npm/webmscore/webmscore.js"></script>
<script>
WebMscore.ready.then(async () => {
const score = await WebMscore.load('mscz', msczdata)
})
</script>
For latest browsers which support ES Modules
import WebMscore from 'https://cdn.jsdelivr.net/npm/webmscore/webmscore.mjs'
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('mscz', msczdata)
})
(TBD)
If your score sheet contains characters out of the range of the bundled FreeFont, those characters will be shown as tofu characters (□
or �
) in SVG/PNG/PDF files. Loading extra fonts is required.
webmscore can load any font format supported by FreeType.
const score = await WebMscore.load('mscz', msczdata, [...arrOfFontData])
CJK fonts are no longer bundled inside webmscore since v0.6.0
Loading a soudfont (sf2/sf3) file is required before generating/synthesizing audio.
await score.setSoundFont(soudfontData)
Soudfonts can be found on musescore.org website.
Example: (FluidR3Mono_GM.sf3
)
const soudfontData = new Uint8Array(
await (
await fetch('https://cdn.jsdelivr.net/gh/musescore/MuseScore@2.1/share/sound/FluidR3Mono_GM.sf3')
).arrayBuffer()
)
Sometimes you only want to process a bunch of score metadata, so drawing sheet images internally is a waste of time and system resource.
You can enable the Boost Mode by setting the doLayout
parameter in WebMscore.load
to false
.
Example:
const score = await WebMscore.load('mscz', msczdata, [], false)
const metadata = await score.metadata()
score.destroy()
webmscore's Boost Mode is about 3x faster than the batch converter feature (-j
) of the musescore software, according to the benchmark result.
WebAssembly vs native C++ program!
Install essential tools like make
, cmake
, llvm
, etc.
Install emscripten
v2.0.6 using emsdk
https://emscripten.org/docs/getting_started/downloads.html
Get Qt5 for WebAssembly and apply patches
AQT_PREFIX=$PWD/build.qt5
Qt5_VER=5.15.2
Qt5_DIR=${AQT_PREFIX}/${Qt5_VER}/wasm_32
# if you change the install directory or Qt version, remember to also change the `PREFIX_PATH` variable in `web/Makefile` file
# Download Qt using aqtinstall (https://github.com/miurahr/aqtinstall)
pip install aqtinstall==2.1.*
aqt install-qt linux desktop ${Qt5_VER} wasm_32 --outputdir ${AQT_PREFIX} --archives qtbase
# # Compile the `offscreen` platform plugin
# aqt install-src linux desktop ${Qt5_VER} --outputdir ${AQT_PREFIX} --archives qtbase
# cd ${AQT_PREFIX}/${Qt5_VER}/Src/qtbase/src/plugins/platforms/offscreen
# ${Qt5_DIR}/bin/qmake offscreen.pro && make
# cd - && cp -r ${AQT_PREFIX}/${Qt5_VER}/Src/qtbase/plugins build/qt/
# Apply patches, which
# enable the prebuilt `offscreen` QPA platform plugin (https://doc.qt.io/qt-5/qpa.html), and
# exclude other Qt5Gui plugins
cp -r build/qt/* ${Qt5_DIR}
# Patch emcc.py to emit separate .mem files regardless of MEM_INIT_METHOD settings (MEM_INIT_METHOD won't work with wasm)
sed -i -r "s/(shared.Settings.MEM_INIT_IN_WASM = )True/\1False/" "$(which emcc).py"
git submodule init
git submodule update
webmscore
cd web-public
npm i
npm run build
Build artifacts are in the web-public directory
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.
see files in the web-example directory
cd ./web-example
npm i
npm start # Node.js example
npm run start:browser # browser example
See How to look up function names in the .symbols file?
webmscore is part of the LibreScore project.
1.2.0 - 2023-01-23
WasmError
when webmscore encounters score processing errorWebMscore.load(...)
, overrides the default behaviour which turns off logs in WebMscore.load(...)
.FAQs
MuseScore's libmscore in WebAssembly! Read mscz data, and generate audio/MIDI/MusicXML/SVG/PNG/PDF sheets right in browsers
We found that webmscore demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.