RawJavascript-usage-example

An example how to use OpenSheetMusicDisplay with plain JS/HTML. http://opensheetmusicdisplay.org

Usage

• Clone or download this repository

• Download an OSMD build (opensheetmusicdisplay.min.js) from our Github Releases

  • put it in the same folder (where the index.html already is).

• Open index.html with your browser of choice (we mostly use and support Chrome and Firefox)

  • Select a sample xml or musicxml file to load (we provide one in this repository)
  • You should be able to load and see up to ten scores

• Alternatively, open indexSimpler.html, which is a bit simplified and only shows one score at a time.

For a screenshot, see the Wiki.

For more OSMD usage information, see the OSMD Wiki, specifically Getting Started.

Using a local server to serve files (node http-server)

The code becomes much simpler when not using a choose file dialogue:

• Install npm, open a console/terminal window
• Run npm install http-server -g.
• Run http-server ./resources -p 8080 --cors
• open indexHTTPServer.html or indexHTTPServer-fetch.html (alternative method) Note: This may still cause CORS issues with Chrome, even with http-server --cors. Try Firefox. The next section explains why we use a file server.

File Loading

Due to CORS security settings, it's unfortunately hard to access files from your local hard drive directly via script, without a file choosing dialogue. indexCORS.html does this and is the simplest possible implementation of OSMD. But browsers like Chrome will block this by default. That's why we used a local file server in the previous example.