Introduction to SFMaker

SFMaker is a tool used for generating sound effects reminiscent of those found in old video games. It was originally written during the HTML5 Tools Jam from BostonGameJams.com. The program was inspired by SFXR, but it is an original work and uses no code or algorithms from SFXR.

SFMaker can be used to very easily and quickly create sound effect for games. The normal usage model involves clicking on preset buttons which randomly generate a type of sound until you find something close to what you are looking for, and then tweaking some values to get the sound just right. Presets exist for common types of sounds, such as jumps, zaps, and explosions.

Generated sounds can be exported to a WAVE file. This WAVE file can then be used or converted for any type of application or further modified in an external sound editor.

Alternately, for browser based games, SFMaker generates a small string (called Sound Text) that describes the parameters used to generate the sound. These strings can be used along with the SFMaker library to rebuild the sounds on demand so bandwidth can be saved. SFMaker can also be used as a library to procedurally generate sounds on demand.

Examples

Here are some examples of what SFMaker can do. When you first press a button, the SFMaker library will procedurally generate the audio. Repeat presses use a cached copy.

SFDesigner

The name "SFMaker" refers to both the SFMaker library and the SFMaker package. This includes SFDesigner, which is the web-based utility that is used to create or modify sounds.

SFDesigner provides the actual interface that is used to generate sounds. If the library is being used in an application, then SFDesigner is not needed, since it only provides the design interface.

SFDesigner makes use of the "range" <input> type. Browsers such as Firefox and Internet Explorer currently lack this feature, and so can not properly work with SFDesigner. The recommended browser is Google Chrome.

To create a new sound in SFDesigner, generally the presets on the left side are pressed repeatedly until a sound similar to what you are looking for is created. Afterwards, the various settings can be changed to modify the sound.

Each field has a lock icon that allows that value to be fixed so that pressing presets further will not modify it. This is often very helpful when attempting to find a particular sound. One usage model involves setting known fields to reasonable values for the desired sound, locking them, and then using the random presets to find good settings for the other parameters.

Each of the button controls also has a shortcut key associated with it. This can be revealed by hovering over a button, or found in the documentation.

Detailed descriptions of each of the fields and what the values mean are found in the documentation.

Song Mode

One feature that sets SFMaker apart from similar programs is the "Song" input. When this is used it is referred to as "Song Mode." With this it is possible to play simple music or guide the pitch. There are several examples above showing what song mode can do. In addition to the "Song Mode" examples, "Power Up 3" and "Pick Up 5" both use song mode to create sound effects.

In song mode the "Length" parameter refers to the duration of each note rather than the sound as a whole. Each note is a generated sound of that duration made with the parameters. The "Start Frequency" parameter is ignored, and instead for each note the note's frequency is used as the starting point.

To specify notes, use the letters A through G. Sharps can be specified by using lower case letters. Spaces or unknown letters or symbols will create silence. Octaves can be specified by placing numbers after the note, such as A3 or c6. If no octave is specified then the deafult of 4 is used. To change the default octave the letter 'O' may be used followed by a number. For example "ABO5CDEFG" will play all the major notes from A to G and "AaBO5CcDdEFfGg" will do the same with the sharps.

API

<script type="text/javascript" src="WaveFile.js" \>
<script type="text/javascript" src="sfMaker.js" \>

var sound = sfMaker.generateAudioTag('w=Square,v=16.753,s=45');

var base64 = sfmaker.generateBase64('w=Square,v=16.753,s=45');
var sounds = [];
var x;

for (x = 0; x < 5; x++) {
  sounds[x] = document.createElement('audio');
  sounds[x].src = base64;
}

Design Notes

When this was originally written the options for doing audio on the web were limited. The <audio> tag was somewhat functional, but the Web Audio API was only in its infancy. To work around these limitations a library called WaveFile.js was created. This takes the audio data, wraps it in a WAVE Header, Base64 encodes the file, and the places the results into a data URI.

This technique works well in browsers that support the WAVE format, but it will not work in browsers that do not. It is still possible to use another browser to create sounds and then export and convert them for those browsers, or even non-web-based applications.

The SFMaker Library has 3 core parts:

Download

A much older version of SFMaker has been released in the past under the LGPL. The current version is planned to be released on GitHub soon, possibly under a more permissive license. When it is available a blog post will be made and this space will be updated.