search

spessasus / SpessaSynth

MIDI SoundFont/DLS synthesizer library written in JavaScript.
https://spessasus.github.io/SpessaSynth/
Other
86 stars 10 forks source link

[FEATURE REQUEST] Visualizer layout controls and nicer SFXs #22

Closed asigalov61 closed 3 months ago

asigalov61 commented 3 months ago

@spessasus

I also wanted to suggest integrating more flexible visualizer layout and appearance controls:

1) Horizontal vs vertical visualizer layout 2) Scaling/zoom 3) Nicer, flexible(maybe custom) and more vivid/vibrant SFXs options

spessasus commented 3 months ago

That sounds good. However, I need to clear things up a bit:

  1. Horizontal as in notes? Falling from right to left? Should the keyboard go to the side too?
  2. Zoom in on one specific channel? Currently you can sort of "zoom in" by shrinking the keyboard size in the settings. If that's not what you're looking for, please describe it more clearly.
  3. Can you give an example?
asigalov61 commented 3 months ago

@spessasus

1) Horizontal as in MIDI editors layouts, moving from right to left with the keyboard on the side, that is correct! Right to left flow is most natural and standard for music so it should be available as an option.

2) Maybe not zoom but scaling to the provided MIDI's range of notes so that visualizer and visualized notes take up the whole screen.

3) I was thinking some nice particles or flames on keyboard impact or the same instead of note bars. To make things more colorful, vivid and pleasing. I know this may be hard to do so this was just a thought. If I will find a good example SFXs for JavaScript, I will let you know.

spessasus commented 3 months ago

Just to make sure, these changes will apply to the Web App/Local Edition. spessasynth_lib does not provide the renderer or the keyboard. You have to program these manually.

asigalov61 commented 3 months ago

@spessasus Yes, that is fine. I understand.

spessasus commented 3 months ago

@asigalov61 i've added feature 1 and 2!

Option 1 can be found in the interface settings under the "Layout direction" option

Option 2 can be found under the "keyboard range" setting. It's called "Use song's key range"

I hope you like it! :-)

asigalov61 commented 3 months ago

@spessasus This is fantastic :) Thank you so much :)

Btw, is there any way you can add these two options to your demo so that I can see how it would look with note bars and so that I have a code example to work with?

asigalov61 commented 3 months ago

@spessasus Nm, I see that you have added it already! :)

Thank you very much :)

spessasus commented 3 months ago

Hi @asigalov61,

Tip about the key range: check out the MIDI class documentation. It now has a keyRange property.

And for sideways notes, check the computeNotePositions method in the renderer. I hope this helps!