A tiny JS ringtone generator - how it works

We are talking about the ZzFXM tool, which is useful for developers of indie games or web applications who are forced to operate with a very limited amount of memory.



Let's also talk about analogs - rFXGen, wafxr.





Photo chuttersnap / Unsplash



More about the project



ZzFXM was presented by Frank Force, programmer and author of the game development blog Killed By a Pixel. In his materials, he pays special attention to the issues of saving memory. He once wrote a JavaScript piano simulator that was just one kilobyte.



The melody generator continues this idea - Frank designed it specifically to generate music for ultra-small programs. Such projects are implemented as part of the js13k Games open competition , whose participants write games in HTML5 and JavaScript using tens of KB of memory.



ZzFXM can be used to develop full-fledged indie games. It is licensed under the MIT license , so it is suitable for commercial projects.


Sources and instructions for setting up are in the repository on GitHub .



What's under the "hood"



The utility uses the ZzFX engine to write sound effects that resemble eight-bit. It allows you to control nineteen sound parameters, from volume to frequency and waveform. Examples of sounds that ZzFX can generate can be found on Frank Force's website . ZzFXM uses some of them as samples.



The format of the finished files resembles the MOD used for storing and playing music compositions on the Amiga personal computer , so all samples with the sound of the instruments are stored in different files (modularity principle).



How it works



The composer composes a sequence of notes indicating which instrument should play it and when. This sequence is called a track. Several tracks sounding in parallel form a block (pattern) with their own number. Further, the composer specifies in the program code which pattern should sound and when.



This approach allows you to quickly form the desired composition, but the resulting code is difficult to read without comments. In the repository on GitHub, the author of the generator gives the following example:



[                                     // Song
  [                                     // Instruments
    [.9, 0, 143, , , .35, 3],             // Instrument 0
    [1, 0, 216, , , .45, 1, 4, , ,50],    // Instrument 1
    [.75, 0, 196, , .08, .18, 3]          // Instrument 2
  ],
  [                                     // Patterns
    [                                     // Pattern 0
      [                                     // Channel 0
        0,                                    // Using instrument 0
        -1,                                   // From the left speaker
        1,                                    // play C-1
        0, 0, 0,                              // rest (x3)
        3.5,                                  // play E-1 with 50% attenuation
        0, 0, 0                               // rest (x3)
      ],
      [                                     // Channel 1
        1,                                    // Using instrument 1
        1,                                    // From the right speaker
        2,                                    // play D-1
        2.25,                                 // play D-1 with 25% attenuation
        3.5,                                  // Play E-1 with 50% attenuation
        4.75,                                 // Play F-1 with 75% attenuation
        -1,                                   // Release the note
        0, 0, 0                               // rest (x3)
      ]
    ]
  ],
  [                                     // Sequence
    0,                                    // Play pattern 0
    0,                                    // ...and again
  ],
  120,                                  // 120 BPM
  {                                     // Metadata
    title: "My Song",                      // Name of the song
    author: "Keith Clark"                  // Name of the author/composer
  }
]


You can listen to how the tracks generated using the utility sound on GitHub . Song size does not exceed 550 bytes.



What are the analogues



One of the analogues of ZzFXM is rFXGen . It is written in C and based on the sfxr project - in 2007, it was submitted by one of the participants in the LD48 competition. Within its framework, each developer must submit a small game in 48 hours. RFXGen utility supports oscillators, vibrato, and low and high pass filters.





Photo by Ohmydearlife / Pixabay



Another compact sound generator - wafxr . It renders live audio using the WebAudio API and the wasgen library . Wafxr also supports oscillators, tremolo / vibrato and various filters. There is a demo of the work on GitHub - there you can evaluate the tool yourself.






What we have on Habré:








« Hi-Fi»:





— ,

VR

Sporth — live-

: 5 , «»







All Articles