Skip to main content
Version: Next

Developer Tools

The developer tools provide useful utilities during the development process to dial in parameters in real-time using a graphical user-interface, and visualize currently connected sources relative to the user.

The developer tools come in their own npm package:

npm install @atmokyaudio/websdk-dev-tools

See Installation for more details.

Each tool requires only a single function call to open a popup window with the tool's graphical user interface. The window will be connected to the provided Renderer instance and can both retrieve and update the current state of the scene.


The open<Tool> function can be called programatically, or with a button onclick event:

let button = document.getElementById("devToolButton") as HTMLButtonElement;
button.onclick = () => {

Attenuation Curve Designer

Attenuation Curve Designer

Dialing in the right attenuation curve purely in code can be quite exhausting. The Attenuation Curve Designer comes to the rescue. Its graphical user interface not only displays you the current curve, but also the live distances of the active sources. By dragging the points you can adjust the curve in real-time.

With a couple of attenuation curves and sources active, the visualization can become quite crowdy. Simply click the legend items to toggle a specific curve on/off. A double-click will hide all but the clicked one, so you can focus on a single curve and source group. Double-clicking again will bring all curves back up.

import { openAttenuationCurveDesigner } from "@atmokyaudio/websdk-dev-tools";

Once satisfied, simply copy the displayed commands and paste it into your application code.

Source Viewer

Source Viewer

The Source Viewer displays how the sources of a scene are positioned relative to the listener. This helps with checking if sources are correctly placed. The user-interface is freely rotatable and zoomable, so that no source goes unnoticed.

import { openSourceViewer } from "@atmokyaudio/websdk-dev-tools";