Members-Only
Recent Talks & Demos are for members only
You must be an AI Tinkerers active member to view these talks and demos.
What happens when you give a guy with little coding experience an AI Server? Just Another AI DAW (JAAD)
Explore an open-source AI DAW that uses Google Gemini for real-time mixing advice, generative MIDI, and mastering, all in a local browser interface.
Just Another AI DAW (JAAD) is an open-source, browser-based, multitrack Digital Audio Workstation that integrates Google Gemini to deliver real-time AI mixing advice, generative MIDI/stem creation, and mastering tools directly in a local-first interface.
In the live demo, I will showcase a working multitrack workspace with responsive AudioWorklet playback, demonstrate Gemini-powered tempo detection and natural-language MIDI sequence generation, and show how we handle local storage caching using the Origin Private File System (OPFS) alongside a WebGL-based visual analyzer.
Generated 4 days ago
Generating a talk summary...
View full transcript
A Dockerized, Firebase-backed digital audio workstation using TypeScript.
- Gemini APIIntegrate Google's multimodal Gemini models (Pro, Flash) into your application via REST or SDKs: generate content, process up to 1000-page PDFs, and execute code with a 2-million token context.The Gemini API delivers Google's most advanced models (Gemini 3 Pro, 2.5 Flash) directly into your applications. Leverage its multimodal power: process text, images, video, and audio inputs for tasks like content generation, summarization, and visual understanding. Utilize key features including the 2-million token context window, structured JSON output, and function calling to build complex, reliable agents. Choose your integration: use the standard REST API, streaming endpoints (SSE), or the Live API (WebSockets) for real-time conversational experiences. Get started with the free tier and robust SDKs for Python, Java, Go, and more.
- React 19React 19 is a major performance and ergonomics upgrade: It ships the React Compiler and simplifies data mutations with Server/Client Actions.React 19 is a significant leap, driving performance and developer experience with two core technologies: the **React Compiler** and **Actions**. The Compiler automatically optimizes re-renders, effectively eliminating the need for manual memoization via `useMemo` and `useCallback` . This delivers a performance boost with zero code changes. **Actions** simplify data mutations, such as form submissions, by integrating with concurrent features to automatically manage pending states, errors, and optimistic updates using new hooks like `useActionState` and `useOptimistic` . Additionally, the release stabilizes **React Server Components** for faster initial page loads and introduces the `use()` hook for reading promises or context directly .
- Web Audio APIThe Web Audio API provides a high-level JavaScript system for processing and synthesizing audio: use a modular routing graph for real-time, high-precision sound control.The Web Audio API is your browser's complete digital signal processing engine. It centers on the `AudioContext` (the processing environment) and a network of connected `AudioNode` objects (the modular routing graph). You can source audio from an `OscillatorNode` for synthesis, a microphone via `MediaStream`, or an HTML `<audio>` element. These sources connect to nodes like `GainNode`, `BiquadFilterNode`, or `ConvolverNode` to apply effects and mixing. This architecture supports low-latency, sample-accurate scheduling for applications like drum machines and sequencers, plus it enables advanced features like 3D spatialization and real-time audio visualization with the `AnalyserNode`.
- WebAssemblyWebAssembly (Wasm) is a compact binary instruction format: it provides a portable compilation target for languages like C/C++, Rust, and Go, enabling near-native speed execution in browsers and server-side environments.WebAssembly (Wasm) is a low-level, stack-based virtual machine instruction set: it is a W3C standard, not a human-written language. Developers compile high-performance code, typically from C/C++ (via Emscripten) or Rust, into the compact `.wasm` binary format. This format executes in a safe, sandboxed environment, achieving near-native performance for computationally intensive tasks like 3D rendering (WebGL), game engines, or complex data processing. Wasm runs alongside JavaScript in all major browsers (Chrome, Firefox, Safari, Edge) and is expanding rapidly into non-web use cases via WASI (WebAssembly System Interface) for serverless and containerized computing.
- Origin Private File SystemA high-performance, browser-sandboxed virtual filesystem that gives web applications private, direct byte-level file access without user permission prompts.The Origin Private File System (OPFS) solves the web's storage performance bottleneck by providing a highly optimized, origin-specific storage endpoint. Unlike the standard File System Access API, OPFS bypasses intrusive user permission dialogs because the files remain completely hidden from the user's operating system explorer. By operating within a secure sandbox, it grants web applications direct, byte-by-byte write access to local storage. This architecture makes OPFS the go-to standard for data-heavy browser applications (such as Adobe Photoshop on the Web or in-browser SQLite databases) that require near-native file manipulation speeds and efficient handling of massive datasets.
- - Core Stack: React 19React 19 streamlines web development with native async Actions, Server Components, and built-in document metadata support.React 19 marks a major evolution for the core library, moving features like React Server Components (RSCs) and Server Actions into the stable channel. The release focuses heavily on reducing boilerplate code: new hooks like useActionState and useFormStatus handle pending states and error boundaries automatically during async transitions, while the new use API resolves promises and context directly in render. With built-in support for document metadata (automatically hoisting title and meta tags to the head) and asset preloading, React 19 delivers a faster, more integrated architecture for modern web applications.
- ViteVite is the next-generation frontend build tool: instant server start with native ES modules and lightning-fast Hot Module Replacement (HMR).Vite (French for 'quick') is a modern build tool created by Evan You (Vue.js's creator) that delivers a dramatically faster development experience. It operates in two major parts: a dev server that serves source code over native ES modules, eliminating the initial bundling step for instant startup; and a production build command that leverages Rollup and esbuild for highly optimized static assets. This architecture provides consistently fast HMR, even for large applications, and offers out-of-the-box support for TypeScript, JSX, and CSS via a universal plugin API.
- TypeScriptTypeScript is an open-source superset of JavaScript: it adds static typing and compiles to clean, standards-based JavaScript.TypeScript is a high-level, open-source language developed by Microsoft: it acts as a superset of JavaScript, adding a powerful static type system. This system enables compile-time type checking, catching errors before runtime (a critical benefit for large-scale applications). The TypeScript Compiler (TSC) reliably transpiles all code into clean, standards-based JavaScript (ES3 or newer), ensuring compatibility across any browser or host environment (Node.js, React.js, etc.).
- Tailwind CSSUtility-first CSS framework: rapidly build modern UIs by composing low-level classes (e.g., `flex`, `pt-4`, `text-center`) directly in your HTML markup.Tailwind CSS is a utility-first framework: it provides thousands of low-level classes (like `flex`, `pt-4`, and `bg-blue-500`) that map directly to single CSS properties, allowing developers to build complex, custom designs without writing custom CSS. This approach, unlike traditional component-based frameworks, ensures consistency across a project's design system and significantly accelerates development speed. The Just-In-Time (JIT) engine is key: it scans your code to generate only the necessary styles, resulting in an optimized, tiny production CSS bundle, which is a major performance advantage for any modern web application.
- AudioWorkletAudioWorklet is a Web Audio API interface that runs custom, low-latency audio processing scripts in a dedicated background thread.AudioWorklet solves the main-thread bottleneck of traditional web audio by moving custom audio processing to a dedicated, high-priority render thread. Developers extend the AudioWorkletProcessor class and register it to handle raw audio data in 128-frame blocks, bypassing the main execution thread entirely. This architecture prevents UI rendering or heavy JavaScript execution from interrupting the audio stream, ensuring glitch-free playback for complex synthesizers, decoders, and real-time effects processors.
- SoundTouch (WebAssembly port for real-time tempo shifting)A WebAssembly and JavaScript port of the SoundTouch C++ library for real-time audio pitch shifting and tempo stretching in the browser.SoundTouchJS brings the robust, time-domain audio processing capabilities of Olli Parviainen's original SoundTouch C++ library directly to modern web browsers. By compiling the core algorithms to WebAssembly and utilizing the Web Audio API's AudioWorklet interface, the library runs heavy digital signal processing calculations off the main thread. This architecture guarantees low-latency, real-time tempo stretching and pitch shifting (independent of one another) without generating garbage collection pauses or blocking the user interface.
Compose Email
Loading recent emails...