search

grame-cncm / faustide

Faust IDE (Integrated Development Environment)
https://faustide.grame.fr
Other
74 stars 21 forks source link
faust

readme

Faust IDE Badge

The online Faust IDE can be used to edit, compile and run Faust code from any recent Web Browser with webassembly support. It works completely on the client side and it is therefore very convenient for situations with many simultaneous users (workshops, classrooms, etc.). It embeds the latest version of the Faust compiler with an efficient webassembly backend and offers polyphonic MIDI support.

Features

Code Editing

The editor engine is based on Monaco Editor. It provides syntax highlighting, auto completion, code hinting and direct access to the online documentation. The documentation command (Ctrl-D) uses the function name at the cursor position to locate the relevant information.

Vim Mode Support

The Monaco Editor supports an optional mode for Vim users. To enable it, open the command pane (F1) and search for 'Toggle Vim Mode'. The same command is used to desactivate this functionality. Alternatively, you can right click on the editor and press 'Open Command Palette' to open the contextual menu.

Project Files

Several DSP files can be added in the top-left Project Files section and edited independently. Any non standard library, like a foo.lib file, can simply be added by drag/drop, then used in the DSP code with import("foo.lib");. DSP files or libraries can also be loaded or saved with the Upload and Save As buttons in the left column.

Auto-Compiling

While the option is turned on, the diagram or the DSP UI will automatically be updated from the code. The editor will also try to tell if there is an error in your code.

MIDI input

MIDI Input is available for Chrome and Firefox browsers. You can also use the computer keyboard to input MIDI notes. We are using key map as Ablelon Live: A-line and Q-line for keys, ZX to move octave, CV to change velocity.

Polyphonic mode

The polyphonic mode can be activated by selecting a number of voices in the Poly Voices menu on the left. Standard Polyphony Parameters have to be used in the DSP voice.

A global effect can be added using the effect = foo; convention, possibly adapting the voice and effect inputs/outputs to make them compatible.

Audio Input

You can choose your audio device or use an audio file to simulate the audio input of DSP. Drap and drop your file to the waveform below to substitute the file.

Audio Output

Audio output can be switched on/off using the he Output is On/Output is Off button on the bottom-right.

Audio Recording

The generated sound can be recorded on the fly then possibly saved using the Record/Save section on the bottom-right.

Remote compilation

The currently edited DSP program can be sent to the remote compilation service which allows to export for a large number of targets, like various standalone formats, a Max/MSP external on macOS or Windows, a SuperCollider UGen.etc. Use the Truck button on the left column to access the list of possible Platform and the list of associated Architecture. Select one Platform/Architecture pair and wait a bit until you get the compiled result as a binary zipped file.
Note that some targets produce a source file (like source/cplusplus), or ready to be compiled projects (like juce/plug-in to create a JUCE project).

Audio analyzers

Tools to display audio signals are available in the left panel:

In the Plot Tab in the middle section, you can switch the visualization between Data, Interleaved, Oscilloscope and Spectroscope. Note that when used with On Event mode, values in the Data visualisation mode only change at sample 128 (since On Event mode plots from 128 samples before the event).

Both input and output have an audio analyzer in the right panel. In the small audio output window at the bottom, you can switch the visualization between Oscilloscope and Spectroscope, or change buffer size and channel. Three numbers showing at right side are current value, estimated frequency and RMS.

In the display zone, zoom can be changed with 2 fingers up/down slide on macOS from 1x up to 800x.

SVG Diagrams

The Diagram tab allows displaying the circuit SVG diagram. You can navigate inside it by clicking on the dark blue part to go down in the circuit hierarchy, or clicking on the diagram border to go up in the circuit hierarchy.

Soundfiles access

The soundfile primitive can be used in the IDE. The audio files have to be accessed:

To access local audio files, a local server can be started:

from flask import Flask, send_from_directory, abort
from flask_cors import CORS
import os

app = Flask(__name__)

# Specify trusted origins
trusted_origins = os.getenv(
    "TRUSTED_ORIGINS", "http://localhost,http://127.0.0.1,https://faustide.grame.fr"
).split(",")

CORS(app, origins=trusted_origins)

# Serve files from a dedicated directory (e.g., "static_files")
STATIC_FILES_DIR = "static_files"
os.makedirs(STATIC_FILES_DIR, exist_ok=True)  # Ensure the directory exists

@app.route("/<path:filename>")
def download_file(filename):
    # Simple validation to prevent directory traversal
    if ".." in filename or filename.startswith("/"):
        abort(404)  # Not found for invalid paths
    return send_from_directory(STATIC_FILES_DIR, filename)

if __name__ == "__main__":
    app.run(debug=False, port=8001)  # Disable debug mode in production

Here are polyphonic samplers examples.

Recommended Browsers

The recommended browsers are the latest versions of Chrome and Firefox for AudioWorklet and MIDI, but it requires an https connection to use the audio inputs.

Building

Firstly ensure that you have Git and Node.js installed.

Clone a copy of the repo then change to the directory:

git clone https://github.com/grame-cncm/faustide.git --depth 1
cd faustide

Beware: on Windows, before cloning the repository, and for the libfaust-wasm.data file line ending to be correctly handled, you'll have to do:

git config --global core.autocrlf false

Install dev dependencies:

npm install

Possibly:

npm update

To build everything (using Webpack 4, Babel 7, TypeScript), this will produce dist/index.js

npm run build

To test, put the directory in a local server, then open page: ./dist/index.html

If you need to update the editor's version using git pull, as the repository has other dependencies hosted on Github, you may run npm update to make sure everything is up to date.

Note that the src/static/examples folder is a manually copied subset of the faust/examples that will have to be updated from time to time.

Launching the local editor

A local HTTP server has to be started with npm run serve (or something similar), then use http://127.0.0.1:8000/dist/ to launch the local editor.

Versioning

You'll have to raise the package version number in package.json before npm run build to properly work.

Useful links

Known problems and solutions