opensheetmusicdisplay/opensheetmusicdisplay

The First JavaScript Engine for MusicXML using VexFlow.

FaceBlack

@rianlu

Simon

@sschmidTU

@rianlu can you share a sample?

FaceBlack

@rianlu

泉舞拜厄 91.xml

@sschmidTU

Simon

@sschmidTU

I took a look at it, but it's not easy to solve, it results from the way key instructions are saved and looked up when you select which measures to draw (start drawing from measure 9). it's better to submit an issue on github for complex problems like this. and please add the sample.

FaceBlack

@rianlu

Ok, thanks!

vivachenx

@vivachenx

I have a question, does anyone know how to deal with it?

AudioPlayer function is not available on the mobile (iOS Android), no sound

@sschmidTU Can you give me permission for the sponsor exclusive channels ?

Simon

@sschmidTU

@vivachenx see DM. About the audio player function, it should work on Android, I tested it. In which browser doesn't it work?
On iOS, unfortunately there are currently issues with audio playback in the browser. The audio library we use has problems with iOS playback as well. At the moment, it doesn't look like there is a simple fix, unfortunately. Maybe we have to wait for a iOS/Safari update, because on a Macbook, it also doesn't work in Safari, but it works in Firefox and Chrome.
I opened an issue for it here:
opensheetmusicdisplay/osmd-extended#38

Luc Bonnin

@lucbonnin

Hi everyone.
I'm new to OSDM but I've 2 (I guess) easy question :
1- is there a way to draw vexFlow canvas on a single infinite line ?
2- is there a way to catch a js event when each note are drawn ? (so that we can add stuff on the DOM on our own code, out of the canvas and music score such as note name A4/La)

FaceBlack

@rianlu

@lucbonnin Add this to setOptions: renderSingleHorizontalStaffline: true

Luc Bonnin

@lucbonnin

Thanks. For the 2nd question do you have any clue?

Simon

@sschmidTU

@lucbonnin Hi! There is no event for note drawing, but you can still manipulate the DOM and add things when using SVG. Simply get a (vexflow)graphicalnote.getSVGGElement() and you can manipulate it. That's what others do, like for changing the color of notes without re-rendering, and noone has seemed to need events for that so far.

Luc Bonnin

@lucbonnin

@sschmidTU cool. If I can navigate through the dom, extract each "SVGElement" data (such as pitch detail, like "A4#", I will be able to do my stuff)

I'll give it a try as I was not using OSDM until I realize drawing music score from an XML file and keeping all these drawings and details that a musician need to play, is not easy at all and very time consuming, so better give it a gtry to OSDM that should work like a charm

Simon

@sschmidTU

@lucbonnin one more tip, for extracting musical data, i would use OSMD's data model, not the SVG. I don't think the SVG can tell you the pitch ("A4#"). Instead, try something like osmd.graphic.measureList[0][0].staffEntries[1].graphicalVoiceEntries[0].notes[0].vfnote or graphicalnote.sourceNote.Pitch.getHalfTone()

FaceBlack

@rianlu

set osmd.zoom and osmd.render()?

Simon

@sschmidTU

@vivachenx Decreasing the zoom (e.g. osmd.zoom = 0.5) is a decent way of getting more sheet music on the screen.
I'm confused about you wanting "to increase the width of a bar a bit", that seems contrary to your goal of getting more sheet music on the screen.
Unfortunately it's not easy to increase the width of a specific measure, maybe we could add an option for that. What does the measure look like? In EngravingRules, there are some options to add more padding/spacing for specific elements in a measure or certain measures like PickupMeasureWidthMultiplier.

Simon

@sschmidTU

that looks really weird, i'm not sure why the measures are that cramped. can you share the musicxml?

Simon

@sschmidTU

also, was that rendered on a phone?

Simon

@sschmidTU

Okay, well, compacttight can be problematic with spacing, especially on such a narrow screen.
After setting compacttight mode, try adjusting the parameters it sets (see above):
VoiceSpacingMultiplierVexflow
VoiceSpacingAddendVexflow
You should try increasing them a bit, e.g. 0.8 and 3.0.

Simon

@sschmidTU

@vivachenx or even more, until the spacing is big enough.

Simon

@sschmidTU

@vivachenx You can disable metronome marks / tempo indications like this: osmd.rules.MetronomeMarksDrawn = false
(in Typescript, use osmd.EngravingRules)

Ansel Du

@anseldu_gitlab

@anseldu osmd.cursor.NotesUnderCursor()

thanks very much! Simon @sschmidTU
another question is here ~~:)~ :

where can I get complete parameter list when I create the osmd object？
such as:

this.osmd = new OpenSheetMusicDisplay(this.$refs.scorediv,
{
followCursor: true,
autoResize: false,
backend: "svg", // svg or canvas : backendType{0,1}

drawFromMeasureNumber: 1,
drawUpToMeasureNumber: Number.MAX_SAFE_INTEGER,
drawingParameters: "compact",
drawPartNames: false,
MetronomeMarksDrawn: false,
...
// Complete parameter list, preferably with parameter explanation :)

}

Simon

@sschmidTU

@anseldu_gitlab https://opensheetmusicdisplay.github.io/classdoc/interfaces/iosmdoptions.html
also EngravingRules for some other options (e.g. osmd.EngravingRules.FingeringTextSize = 2.0), though not all of the EngravingRules are meant to be modified:
https://opensheetmusicdisplay.github.io/classdoc/classes/engravingrules.html

@anseldu_gitlab also, take a look at our Wiki:
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/wiki

Ansel Du

@anseldu_gitlab

@anseldu_gitlab also, take a look at our Wiki:
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/wiki

thank u verry much! and another question: when will be available ---> play back a metronome together with the music (with pre-count) ?

Simon

@sschmidTU

@anseldu_gitlab that's already possible if you have our sponsor-exclusive audio player.
osmd.PlaybackManager.DoPreCount = true
osmd.PlaybackManager.metronome.PreCountVolume = 0.5

Ansel Du

@anseldu_gitlab

Asking weakly, as a basic sponsor, if I could get our sponsor exclusive audio player plugin? @sschmidTU

anseldu

@anseldu

@sschmidTU my duscord user name is anseldu，tks

Simon

@sschmidTU

@vivachenx Yes, I just added the method osmd.PlaybackManager.playFromMs(), please pull the latest version from the extended repo. I also fixed the bug where it would play notes that started before the current cursor position after you set a new position and hit play.

Luc Bonnin

@lucbonnin

Hi,
I'm using the github "explore the demo" example to parse all osmd notes using cursor.Iterator and moving note by note to fill another js array on my side.
As I'm on a given "iterator" position, I want to grab the equivalent SVGElement but I'm not able to do it so far (I guess because I'm using fixed 0 for staffEntries).
osmd.graphic.measureList[iterator.CurrentMeasureIndex][0].staffEntries[0].graphicalVoiceEntries[i].notes[j].getSVGGElement();
Is there an easy way from "iterator" or cursor instance to get the current SVGElement ? (or maybe the currentStaffEntries if it is the point missing). @sschmidTU any cue ?

Simon

@sschmidTU

@lucbonnin Hi, first of all, you can use iterator.CurrentVoiceEntries directly:
const currentTopNote = osmd.cursor.Iterator.currentVoiceEntries[0].notes[0];
To get a GraphicalNote from Note:
const gNote = osmd.rules.GNote(currentTopNote);
gnote.getSVGGElement()

It's even easier if you're using a cursor and not just an iterator:
osmd.cursor.GNotesUnderCursor()[0].getSVGGElement()

1 reply

@sschmidTU Thank you for your work, this is a very useful api ! Helped me solve a big problem

thank you very much, glad to hear! :)

1 reply

Luc Bonnin

@lucbonnin

Other questions. 2 easy one I guess :
1- spacingBetweenTextLines seems to not adding spaces between 2 lines of notes. (I'm using it as osmd.setOption() before rendering. (and after this setOptions I'm using a osmd.zoom = 1.2 (not sure if it is perturbing something here)

2- I've tried to use the transpose calculator from the demo sample but it seems to not work at all on my local :( Seems to not transpose anything. + while parsing the data using osmd.cursor, I got the same "pitch.toString()" displayed. Maybe I'm using the wrong data or missing something

Simon

@sschmidTU

SpacingBetweenTextLines is for (text) labels like lyrics. If they are multi-line, this spacing will be used. What you're looking for is probably osmd.EngravingRules.MinimumDistanceBetweenSystems. A system in a music sheet is what you would usually call a line, and a "line break" is more properly called a system break (new-system in MusicXML)

_2. works in our local demo, you probably haven't imported or set up the TransposeCalculator correctly.

4 replies

try running our local demo to compare:
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/wiki/Debugging

Simon

@sschmidTU

Also for 1., if you're looking for spacing within a system, there's also BetweenStaffDistance and MinimumStaffLineDistance in EngravingRules.

Luc Bonnin

@lucbonnin

again 1000 thanks !

I'll probably have couple of dum questions later ;)

Simon

@sschmidTU

you're welcome! Haha, no problem, there are no stupid questions with OSMD.

Luc Bonnin

@lucbonnin

@sschmidTU as promess, another dum question :)
Is it possible to force (maybe via EngravingRules) the minimum width of a vf-stavenote ?
(min-width or width if min-width is not possible).
My main issue is with "attached notes" not single isolated one

Simon

@sschmidTU

I don't think that's possible, because Vexflow does the x-layout of notes (once, in the formatter function), and there's not much you can do to influence that. You can increase VoiceSpacingMultiplierVexflow or VoiceSpacingAddendVexflow in EngravingRules though to increase spacing in general.

3 replies

Luc Bonnin

@lucbonnin

it seems to be the relevant params. I'll play around with it a bit.

Luc Bonnin

@lucbonnin

@sschmidTU is there an easy way to get the real "height" (in px) of the staff line (for a current cursor note. Note the note height that could vary but the staff line that has to be the same all over the sheet svg ?

Where communities thrive

People

Repo info

Activity