Class OpenSheetMusicDisplay

The main class and control point of OpenSheetMusicDisplay.
It can display MusicXML sheet music files in an HTML element container.
After the constructor, use load() and render() to load and render a MusicXML file.

Hierarchy

  • OpenSheetMusicDisplay

Constructors

constructor

Properties

OnXMLRead PageFormatStandards autoResizeEnabled backendType container cursors cursorsOptions drawBottomLine drawBoundingBox drawSkyLine drawer drawingParameters followCursor graphic loadUrlTimeout needBackendUpdate resizeHandlerAttached rules sheet version zoom zoomUpdated

Accessors

AutoResizeEnabled DrawBottomLine DrawBoundingBox DrawSkyLine Drawer DrawingParameters EngravingRules FollowCursor GraphicSheet Sheet TransposeCalculator Version Zoom cursor

Methods

IsReadyToRender StringToPageFormat autoResize clear createBackend createOrRefreshRenderBackend enableOrDisableCursors exportSVG getLogLevel handleResize load render reset setColoringMode setCustomPageFormat setDrawBoundingBox setLogLevel setOptions setPageFormat updateGraphic

Constructors

constructor

  • Creates and attaches an OpenSheetMusicDisplay object to an HTML element container.
    After the constructor, use load() and render() to load and render a MusicXML file.

    Parameters

    • container: string | HTMLElement

      The container element OSMD will be rendered into.
      Either a string specifying the ID of an HTML container element,
      or a reference to the HTML element itself (e.g. div)

    • Optional options: IOSMDOptions

      An object for rendering options like the backend (svg/canvas) or autoResize.
      For defaults see the OSMDOptionsStandard method in the [[OSMDOptions]] class.

    Returns OpenSheetMusicDisplay

Properties

Protected OnXMLRead

OnXMLRead: Function

Static PageFormatStandards

PageFormatStandards: {
    [type: string]: PageFormat;
}

Standard page format options like A4 or Letter, in portrait and landscape. E.g. PageFormatStandards["A4_P"] or PageFormatStandards["Letter_L"].

Type declaration

  • [type: string]: PageFormat

Protected autoResizeEnabled

autoResizeEnabled: boolean

Protected backendType

backendType: BackendType

Protected container

container: HTMLElement

cursors

cursors: Cursor[]

Private cursorsOptions

cursorsOptions: any

Protected drawBottomLine

drawBottomLine: boolean

Protected drawBoundingBox

drawBoundingBox: string

Protected drawSkyLine

drawSkyLine: boolean

Protected drawer

drawer: VexFlowMusicSheetDrawer

Protected drawingParameters

drawingParameters: DrawingParameters

Protected followCursor

followCursor: boolean

Protected graphic

graphic: GraphicalMusicSheet

loadUrlTimeout

loadUrlTimeout: number

Timeout in milliseconds used in osmd.load(string) when string is a URL.

Protected needBackendUpdate

needBackendUpdate: boolean

Protected resizeHandlerAttached

resizeHandlerAttached: boolean

Protected rules

rules: EngravingRules

Protected sheet

sheet: MusicSheet

Protected version

version: string

zoom

zoom: number

Protected zoomUpdated

zoomUpdated: boolean

Accessors

AutoResizeEnabled

  • get AutoResizeEnabled(): boolean

  • Returns boolean

  • set AutoResizeEnabled(value): void

  • Parameters

    • value: boolean

    Returns void

DrawBottomLine

  • get DrawBottomLine(): boolean

  • Returns boolean

  • set DrawBottomLine(value): void

  • Parameters

    • value: boolean

    Returns void

DrawBoundingBox

  • get DrawBoundingBox(): string

  • Returns string

  • set DrawBoundingBox(value): void

  • Parameters

    • value: string

    Returns void

DrawSkyLine

  • get DrawSkyLine(): boolean

  • Returns boolean

  • set DrawSkyLine(value): void

  • Parameters

    • value: boolean

    Returns void

Drawer

  • get Drawer(): VexFlowMusicSheetDrawer

  • Returns VexFlowMusicSheetDrawer

DrawingParameters

  • get DrawingParameters(): DrawingParameters

  • Returns DrawingParameters

EngravingRules

  • get EngravingRules(): EngravingRules

  • Returns EngravingRules

FollowCursor

  • get FollowCursor(): boolean

  • Returns boolean

  • set FollowCursor(value): void

  • Parameters

    • value: boolean

    Returns void

GraphicSheet

  • get GraphicSheet(): GraphicalMusicSheet

  • Returns GraphicalMusicSheet

Sheet

  • get Sheet(): MusicSheet

  • Returns MusicSheet

TransposeCalculator

  • get TransposeCalculator(): ITransposeCalculator

  • Returns ITransposeCalculator

  • set TransposeCalculator(calculator): void

  • Parameters

    • calculator: ITransposeCalculator

    Returns void

Version

  • get Version(): string

  • Returns the version of OSMD this object is built from (the version you are using).

    Returns string

Zoom

  • get Zoom(): number

  • Returns number

  • set Zoom(value): void

  • Parameters

    • value: number

    Returns void

cursor

  • get cursor(): Cursor

  • Returns Cursor

Methods

IsReadyToRender

  • States whether the render() function can be safely called.

    Returns boolean

Static StringToPageFormat

  • Parameters

    • pageFormatString: string

    Returns PageFormat

Protected autoResize

  • Attach the appropriate handler to the window.onResize event

    Returns void

clear

  • Clears what OSMD has drawn on its canvas.

    Returns void

createBackend

  • Parameters

    • type: BackendType
    • page: GraphicalMusicPage

    Returns VexFlowBackend

Protected createOrRefreshRenderBackend

  • Returns void

enableOrDisableCursors

  • Enable or disable (hide) the cursor.

    Parameters

    • enable: boolean

      whether to enable (true) or disable (false) the cursor

    Returns void

exportSVG

  • Returns void

getLogLevel

  • Returns number

Protected handleResize

  • Helper function for managing window's onResize events

    Parameters

    • startCallback: (() => void)

      is the function called when resizing starts

        • (): void

        • Returns void

    • endCallback: (() => void)

      is the function called when resizing (kind-of) ends

        • (): void

        • Returns void

    Returns void

load

  • Load a MusicXML file

    Parameters

    • content: string | Document

      is either the url of a file, or the root node of a MusicXML document, or the string content of a .xml/.mxl file

    • Optional tempTitle: string

      is used as the title for the piece if there is no title in the XML.

    Returns Promise<{}>

render

  • Render the music sheet in the container

    Returns void

Protected reset

  • Initialize this object to default values FIXME: Probably unnecessary

    Returns void

setColoringMode

  • Parameters

    • options: IOSMDOptions

    Returns void

setCustomPageFormat

  • Parameters

    • width: number
    • height: number

    Returns void

setDrawBoundingBox

  • Parameters

    • value: string
    • Optional render: boolean

    Returns void

setLogLevel

  • Sets the logging level for this OSMD instance. By default, this is set to warn.

    @param: content can be trace, debug, info, warn or error.

    Parameters

    • level: string

    Returns void

setOptions

  • Set OSMD rendering options using an IOSMDOptions object. Can be called during runtime. Also called by constructor. For example, setOptions({autoResize: false}) will disable autoResize even during runtime.

    Parameters

    • options: IOSMDOptions

    Returns void

setPageFormat

  • Sets page format by string. Used by setOptions({pageFormat: "A4_P"}) for example.

    Parameters

    • formatId: string

    Returns void

updateGraphic

  • (Re-)creates the graphic sheet from the music sheet

    Returns void

Settings

Member Visibility

Theme

On This Page