Skip to content

How To Use App

spessasus edited this page Jun 25, 2024 · 3 revisions

How to use the App

This is a basic guide to using the application

Jump to keybinds

Tip

It is highly recommended that you use your own soundfont instead of the built in one, to get the most out of SpessaSynth. My personal favorite can be downloaded here

Legend:

  • Local edition - the app you use once you download the repository via node.js
  • Demo - the online demo page

Selecting a soundfont

Local edition

  1. Put your soundfonts into the soundfonts folder
  2. The last soundfont you used will load automatically
  3. Use the select at the top, the soudfont will automatically load (the playback will pause while the soundfont loads to prevent lagging)

Demo

  1. If you don't have a soundfont, click Use the bundled SoundFont
  2. If you do have a soundfont, click Upload the soundfont and select your sf2 or sf3 file.

Playing

  1. Click Upload your MIDI files
  2. Select the .mid files you want to play. You can select multiple files.
  3. Use buttons at the bottom or keybinds to control the playback.

Note: When you select one file, the loop is set to ON, when you select multiple files, LOOP is set to OFF (it will go through all songs and then loop back)

Settings

Hover over the labels (e.g. Selected Channel) and a tooltip should pop up with a description Text that glows when hovered over can be clicked, it's a toggle.

Synthesizer Controller

A simple, but powerful integrated controller.

  • Press S or click Synthesizer Controller in the top left corner to open.
  • A single row is a single channel controller. They are color coded for your convenience.
  • All icons and slider can be hovered on for a more verbose descrption
  • Most sliders (i.e. Volume, pan, etc.) can be modified. Try dragging with the left mouse button!
  • Presets (patches) are selected via the selector on the right. Note that the names vary from soundfont to soundfont.
  • Once you change the preset, it becomes locked. It is marked with red text and the song cannot change it. To unlock it, hover over it and click the arrow circle on the right.
  • You can lock controllers too! Just right click on the text. Note: to unlock it, right click again.
  • The sliders and buttons at the top control the whole synthesizer.

Warning

If you connect a MIDI device, you need to RESTART YOUR BROWSER for it to show up!

Keybinds cheat-sheet

Here are all the keybinds

Playback

  • Spacebar: play/pause
  • [: go to the prevous song
  • ]: go to the next song
  • L: toggle loop for this track
  • T: toggle decoded text & lyrics
  • Left arrow: seek back 5 seconds
  • Right arrow: seek forwards 5 seconsd
  • 0-9: seek around the song, like on YouTube (i.e. 0 is start, 5 is half, etc.)

Misc

  • S: toggle synth controller
  • R: toggle settings
  • Shift: hold pedal for the keyboard
  • Backspace: MIDI Panic (stop all notes)
  • B: Toggle High Performance Mode