Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 21:17
    rvilarl opened #1170
  • 19:45
    sschmidTU commented #1169
  • 19:45
    sschmidTU commented #1169
  • 19:44
    sschmidTU commented #1169
  • 19:44
    sschmidTU closed #1169
  • 19:44
    sschmidTU commented #1169
  • 19:25
    rvilarl opened #1169
  • May 13 10:37
    geniot commented #670
  • May 13 10:36
    geniot commented #670
  • May 13 09:45
    sschmidTU commented #670
  • May 13 09:41
    sschmidTU commented #670
  • May 13 09:39
    sschmidTU commented #670
  • May 13 09:38
    sschmidTU commented #670
  • May 13 09:18
    geniot commented #670
  • May 13 09:05
    geniot commented #670
  • May 13 09:00
    geniot commented #670
  • May 11 05:38
    rvilarl commented #1139
  • May 10 21:51
    sschmidTU commented #1139
  • May 10 21:50
    sschmidTU commented #1139
  • May 10 20:31
    rvilarl commented #1139
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
image.png
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
  1. 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
image.png
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
image.png
@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 ?
Simon
@sschmidTU
@lucbonnin Yes, one way is to get the bounding box of the GraphicalNote's SVG element.
Try this code in the public OSMD demo:
for (let i=0; i<osmd.graphic.measureList.length; i++) {
    const bbox = osmd.graphic.measureList[i][0].staffEntries[0].graphicalVoiceEntries[0].notes[0].getSVGGElement().getBBox();
    console.log(`pos: (${bbox.x}, ${bbox.y})`);
    osmd.drawer.DrawOverlayLine({x: bbox.x / 10, y: bbox.y / 10}, {x: bbox.x / 10 + 2, y: bbox.y / 10}, osmd.graphic.MusicPages[0])
}
image.png
This only works with the SVG backend of course, for Canvas you'd need to catch the values from the SkyBottomLineCalculator instead.
This is a nice showcase for Exploring the Demo, i'll add it to our Wiki :)
2 replies
Simon
@sschmidTU
by the way, most of these draw methods like DrawOverlayLine return the SVG element they were drawing, so you can save it and remove it again later, to undo the drawing:
osmd.drawer.backend.removeNode(mySvgNode)
Simon
@sschmidTU
here's the test sample: note_height_skyline_test_sample.zip
Luc Bonnin
@lucbonnin
thanks. For other people that may be interested to grab svgElem from cursor (info grabbed from a previous Simon answer) :
svgElem = osmd.cursor.GNotesUnderCursor()[0].getSVGGElement();
svgElemStaffLineHeight = svgElem.getBBox().y;
Luc Bonnin
@lucbonnin
small detail : GNotesUnderCursor() can be used when cursor is on a note. What if it is on a "silence" item ? GNotesUnderCursor() return null in this case. Is there another method to catch the SVGElement() for a "silence" ? @sschmidTU
Simon
@sschmidTU
it shouldn't return null, it should return a GraphicalNote as well. Rests are also GraphicalNotes.