Synth

Synth is a virtual synthesizer app for ryOS, offering a dynamic platform for sound design and music creation. It combines robust audio synthesis capabilities with an engaging 3D waveform visualization, making it an ideal tool for musicians, sound enthusiasts, and anyone looking to explore the world of digital sound.

Overview

The Synth app provides a comprehensive virtual instrument experience, leveraging Tone.js for its audio engine and Three.js for stunning real-time visual feedback. Users can play notes using an intuitive on-screen keyboard or their computer's keyboard, crafting a wide array of sounds from classic synth patches to experimental soundscapes. Its primary purpose is to allow users to experiment with sound synthesis, apply various audio effects, and save their custom creations as presets.

Designed for both beginners and experienced users, Synth encourages exploration through its accessible controls and immediate auditory and visual feedback. Whether you're sketching out musical ideas, designing unique sound effects, or simply enjoying the interplay of sound and visuals, Synth brings a powerful and interactive audio workstation directly to your ryOS desktop.

Features

Virtual Keyboard: Play musical notes using the on-screen piano keys or directly from your computer's keyboard, offering flexible input methods for performance and experimentation.

Controls Panel: A dedicated panel allows users to fine-tune core synthesizer parameters, including oscillator types (sine, square, triangle, sawtooth), envelope settings (attack, decay, sustain, release), and other sound-shaping controls.
Presets Management: Save your custom sound designs as presets and load them later, enabling quick recall of your favorite sounds and efficient workflow.
3D Waveform Visualization: Experience your sound visually with a live, animated 3D waveform display that dynamically reacts to the audio output, providing an immersive feedback loop when the controls panel is active.
Built-in Effects: Enhance your sounds with a suite of integrated audio effects, including Reverb, Delay, Distortion, Chorus, Phaser, and a Bit-Crusher, each with adjustable parameters.
Octave Shift: Easily shift the entire keyboard's octave range up or down using dedicated buttons or convenient keyboard shortcuts, expanding the playable note range.

User Guide

Getting Started

To launch Synth, simply open it from the ryOS app launcher. Once open, you can immediately start playing notes using your mouse on the virtual keyboard or by pressing keys on your computer keyboard. Explore the default sound, then open the controls panel to begin customizing.

Key Actions

Playing Notes: Click or tap on the virtual piano keys, or use your computer's keyboard (typically the A to ; row for white keys, and W, E, T, Y, U for black keys, depending on the layout) to play notes.

Adjusting Sound Parameters: Click the "CONTROLS" button to reveal the controls panel. Use the various dials and selectors to change oscillator types, adjust the attack, decay, sustain, and release (ADSR) of the envelope, and modify other synthesis parameters.
Applying Effects: Within the controls panel, activate and configure a range of audio effects like Reverb, Delay, and Distortion to add depth and character to your sound.
Managing Presets: Use the menu bar to save your current sound settings as a new preset or load a previously saved preset to quickly switch between different sounds.
Shifting Octaves: Utilize the CaretLeft and CaretRight buttons on the interface, or the - and + keys on your keyboard, to shift the playable octave range up or down.
Observing the Waveform: While the controls panel is open, the 3D waveform visualization will animate in real-time, reflecting the sonic characteristics of your current sound.

Tips & Shortcuts

Keyboard Mapping: Familiarize yourself with the computer keyboard mapping for the virtual piano keys for faster playing.

Octave Shortcuts: Use the - and + keys on your physical keyboard as a quick way to shift octaves without needing to click the on-screen buttons.
Visual Feedback: Keep the controls panel open to enjoy the live 3D waveform visualization, which provides excellent visual feedback on your sound design choices.
Unified Input: The app uses pointer events, meaning the on-screen keyboard responds equally well to mouse clicks and touch input.

Technical Details

Window Configuration

Default size: 720×400px
Minimum size: 720×290px

Component Architecture

The app consists of 3 component file(s):

src/apps/synth/components/Waveform3D.tsx: Handles the Three.js-based 3D visualization of the audio waveform.

src/apps/synth/components/SynthAppComponent.tsx: The main application component, orchestrating the UI, controls, and integration of other components.
src/apps/synth/components/SynthMenuBar.tsx: Manages the application's menu bar, including options for presets, help, and about dialogs.

Hooks & Utilities

Custom Hooks:

src/apps/synth/hooks/useSynthLogic.ts: Encapsulates the core synthesis logic, managing Tone.js instances, note playback, effect application, and parameter changes.

State Management

The Synth app utilizes Zustand for global state management, specifically through a useSynthStore (as indicated by the import NoteLabelType from "@/stores/useSynthStore"), to manage the synthesizer's parameters, active effects, presets, and UI-related states (like dialog visibility). Local component state is also used where appropriate for UI elements.

Related Apps

Synth can be effectively paired with other ryOS applications. For instance, you might use an Audio Recorder app (if available) to capture your synthesized creations, or a File Manager to organize and import/export your custom sound presets.