Team Falcons 🏠

Online Synth Player

General description of the mathematical music instrument and the various functional modules

Introduction

This project was created in the course II1305 Project in Information and Communications Technology, offered by KTH Royal Institute of Technology. A synthesizer is an electronic musical instrument, and our version creates sound using mathematical functions. It is also available online, as a web-based application! The user provides a mathematical function, and an interval, which creates a periodic waveform. The user can then play the waveform on the keyboard.

Method

Our synthesizer creates sound by repeatedly playing a periodic waveform from a constrained mathematical function. The detailed steps are as follows: Initially, a user defined mathematical function g is parsed from input. We will not dive into this since it's not part of the audio synthesis technique (and also quite boring). The following step is to buffer the audio signal when a musical note is played (which is what happens when a key on the synth is pushed). This part is quite simple, and only requires computing the samples for the waveform for a given frequency (note), and then repeatedly looping through those samples. That's it, that is how the synth makes sound! The synthesizer also has so called evenloped which dictate how the sound changes with repsct to time. These will either change the amplitude (volume) of the sound, the pitch (frequency) of the sound, or appply a lowpass filter with a cutoff frequency depending on time. All of this combined can make very interesting sounds, only using math.

Contact

During the Expo hours the team members will be online in voice chat via Discord on the following link.
23-05-2022 13:00-15:00
24-05-2022 13:00-15:00


Questions can be asked in the chat at any time. You can also contact us through any of emails below:

Team



Atheer Salim

Developer

Github

Azer Hojlas

Developer

Github

Hasan Al-Zubeidi

Developer

Github


Isak Nyberg

Developer - Scrum Leader

Github

Johannes Arenander

Developer - Product Owner

Github

Lucas Werelius

Developer

Github

Rasmus Danielsson

Developer

Github

Modules

and their functionality


Graph

Plots the given mathematical function but limits the range in the interval [1, 1]

Parser

Converts the given mathematical function into javascript readable code. It provides protection against malicious code injection as well

Waveform

Handles the I/O functionality, i.e responsibility for interpreting functions and user input, upon which actual sound is produced



Design and Pipelining

Handles user interface and website aesthetics, enabling the user to play the instrument in a piano-like fashion

Envelope Graph

Displays three separate concatenated functions. Options exist to display these as continuous and normalized

Envelope

Instead of repeating the same function constantly, envelope takes several functions into consideration when calculating how sound should be emitted and changed over time.

Recorder

Records sequences that a user plays. This sequence can be replayed or downloaded in a format that is replayable and compatible with the website.

URL

The state of the website can be saved into a URL that can be saved for later use.

Synth

Plays sound buffers through utilizing the javascript web audio API

Piano

Handles key-press functionality and backend

MidiKeyboard

Enables the use of a connected physical midi keyboard

Graph

Receives several arguments which shape the graph. The graph is based upon Chart JS, a javascript library that-- given a dataset in the form of a domain and range, plots a graph out of said dataset. The arguments received are first and foremost a value maxX, which is the maximum rendering range of the graph in the x-direction. Another argument, numPoints is the amount of points that should be evenly distributed along this x-axis of legth maxX. The delta between each point is maxX/numPoints. A function is provided that provides the corresponding range for each point, i.e each domain value associated with the point. Finally, a boolean: normalize is used as its names implies, if the client wants to normalize the graph. The range of the graph is beforehand limited to the interval [-1, 1], this however can severly limit how the graph is displayed as soon as the range falls out of the aforementioned interval. In order to preserve the derivative of the graph in all points, the range can be normalzied in order to fall between the specified range. This is achieved by dividing all values in the range with the biggest value in the range (in magnitude, i.e absolute amount). Consequently, the largest value in the range will amount to 1 (or -1) and the rest will be distributed in the interval [-1, 1].
  • MaxX: Indicates the upper bound of the domain interval in the span [0, maxX], i.e how far the graph wll go in the x-direction
  • numPoints: The amount of points that will be calculated and plotted
  • fn: The function that will be plotted
  • normalize: Boolean that indicates whether to let the function be plotted fully or constrict it to the interval -1 to 1
  • Output: Graph that displays a function within a constrained domain and range

Parser

Parser receives a mathematical function as input in text form and translates said function into javascript-readable code. This is achieved through regex (regular expression), a way of categorizing strings or sub-strings by imposing syntactical rules that search through said strings.
  • expr: expression that the user provides in the input field
  • Output: The expression in javascript-readable code

Envelope graph

Envelope graph is similar in all but the amount of functions taken as input, as well as three different intervals that for each respective function. These functions are concatenated and displayed as one continuous function.
  • maxX1-maxX3: Indicates the upper bound of the domain interval in the span [0, maxX], i.e how far the graph wll go in the x-direction
  • fn1-fn3: The functions that will be plotted
  • Output: The graph with the concatenated functions

Waveform

Handles the I/O functionality, i.e responsibility for interpreting functions and user input, upon which actual sound is produced. The module works by sampling values along the imagined function line in the graph. Taking all values in the range is unfeasible as the range has an infinite amount of members within any interval of the domain. Instead, values are sampled according to a set sample rate, similar to points with a given delta in a graph. This buffer plays the sampled values by passing on these values to the computer output device. The frequency with which these samples are played is further impacted by frequency, which is mapped to the various computer keyboard keys.
  • maxX1-maxX3: Indicates the upper bound of the domain interval in the span [0, maxX], i.e how far the graph wll go in the x-direction
  • fn1-fn3: The functions that will be plotted
  • Output: A buffer with playable sampled data points, i.e a waveform

Envelope

Changes data points in the buffer created in the waveform module which effectively alters the waveform. These changes can be with reggards to amplitude (volume), pitch (frequency variance) and filtering of sound (only allow certain frequencies). Similarly to waveform and graph, a function is used to alter the value of the datapoints.
  • N: Number interval
  • fn: Function to sample
  • Samples: Number of samples in interval
  • Output: An altered buffer with playable sampled data points, i.e a waveform

Design And Pipelining

General design and aesthetics of the webpage, e.g graph sizes, settings and a graphical display of the synth piano. This module is also responsible for connecting all other aforementioned modules, i.e creating pipelines between them.

Recorder

Records whatever is played by the user. This sequence or data blob can be either downloaded for later use or replayed instantly.
  • Output: Playable data blob

URL

Saves the state of the synth whenever the user wishes to. This action preserves said state in a URL that is saved to the clipboard upon command. The URL can then be reused at user discretion on a later date or time.
  • Presets: Settings present at session
  • Norms: Values such as pitch, amplitude etc
  • Output: URL that holds the saved state of a synth session

Synth

Receives a readily available buffer and produces sound from the data points it contains.
  • Output: Sound

Piano

Handles the backend of the piano UI at display on the website. Keeps track of when keys were pressed, how long they were pressed, and when they were released.
  • Synth: Receives a synth as argument
  • Output: Sequences of pressed keys

Midi keyboard

When a midi keyboard is present, pressing the piano notes on the keyboard will map to the corresponding notes on the computer keyboard.
  • Synth: Receives a synth as argument
  • Synth: Receives a piano as argument
  • Output: Simulates the sequences of pressed keys in piano