sf2synth.js

sf2synth.js is WebMidiLink based SoundFont Synthesizer.

Install

npm install @logue/sf2synth

or

yarn add @logue/sf2synth

Usage

<div id="placeholder"></div>

import SoundFont from '@logue/sf2synth';

const option = {
  // Url to SoundFont file.
  url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/Yamaha XG Sound Set.sf2', // Default
  // url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/A320U.sf2', // Same as original sf2synth.js
  // Enter the ID of the destination DOM. If left blank, it will be added to the end of body.
  placeholder: 'placeholder',
  // Displays the MIDI keyboard GUI. Set it to false if you don't need. Since it does not process the drawing load, the operation becomes lighter.
  drawSynth: true,
  // ave the acquired SoundFont data in the browser using the Cache API. (Default is false)
  cache: true,
};

const wml = new SoundFont.WebMidiLink({});
wml.setLoadCallback(() => {
  // When ready to load.
});
wml.setup(); // If you want to override the SoundFont URL, put that address in this function.

Please refer to the index.html source code for details.

CDN

Entry point is SoundFont.

<link
  href="https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/style.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/sf2synth.iife.min.js"></script>
<script>
  const wml = new SoundFont.WebMidiLink({});
  // ...
</script>

ArrayBuffer usage

When using File API, pour the arraybuffer directly into the setup function.

In this case, the cache cannot be used. You will have to implement the caching yourself if necessary.

import SoundFont from '@logue/sf2synth';

/** SoundFont file. */
const buffer = new ArrayBuffer(...);

/** Option */
const option = {
  // attach dom id
  placeholder: 'placeholder',
  // If you not nessesaly to draw keyboad, set false.
  drawSynth: true
};

const wml = new SoundFont.WebMidiLink(option);
wml.setupByBuffer(buffer);

WebMidiApi

WebMidiApi is supported experimentally. A sound will be produced when a MIDI signal is sent to the DOM specified by the placeholder.

import SoundFont from '@logue/sf2synth';

const option = {
  // Default Url to SoundFont file. If blank, the Yamaha XG Sound Set.sf2 from jsdelivr will be loaded.
  // The following address will be the same SoundFont as the original sf2synth.js.
  // url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/A320U.sf2',

  // attach dom id
  placeholder: 'placeholder',

  // If you not nessesaly to draw keyboad, set false.
  drawSynth: true,

  // Cache Soundfont
  cache: true,

  // postMessage origin
  targetOrigin: '*',

  // Default Color Mode (dark, light)
  colorMode: 'auto',
};

/** Initialize Web MIDI API */
const wml = new SoundFont.WebMidiApi(option);
wml.setLoadCallback(() => {
  // When ready to load.
});

// If you want to explicitly specify another SoundFont, put the SoundFont URL in the setup function.
// No need to restart this program.
wml.setup();

Dark mode

If you want switch dark mode, specify it using the SysEx non-commercial (Manifucture ID = 7D) area.

SysEx	Mode
F0 0A 7D 10 00 01 00 F7	Auto
F0 0A 7D 10 00 01 01 F7	Light
F0 0A 7D 10 00 01 02 F7	Dark

This feature may change in the future.

Sample

sf2synth.js corresponds to the sound source in MIDI. Call and use this wml.html from a sequencer like smfplayer.js.

https://logue.dev/sf2synth.js/

Compatibility

equires a browser that supports the Web Audio API.

• Google Chrome 25+
• Google Chrome for Android 28+
• FireFox 25+
• Edge

MIDI Compatibility

• sf2synth.js is compliant with WebMidiLink Level 1.
• Supported MIDI standards are GM Level 2 and YAMAHA XG Lite (equivalent to YAMAHA MU50).
• MIDI files created in the Roland GS standard may not play properly.
• Portamento and chorus effect is not supported.
• A specification called progress has been added as an instruction that is not compliant with WebMidiLink.

See Also

• smfplayer.js - MIDI player part
• Reverb.js - Used in the reverb effect of this program.

License

Licensed under the MIT License.

• 2013 by imaya / GREE Inc.
• 2013-2024 by Logue