Draw

Draw is useful for synchronizing visuals and audio events. Callbacks from Tone.Transport or any of the Tone.Event classes always happen before the scheduled time and are not synchronized to the animation frame so they are not good for triggering tightly synchronized visuals and sound. Draw makes it easy to schedule callbacks using the AudioContext time and uses requestAnimationFrame. Draw is used to synchronize the draw frame with the Transport's callbacks. See Draw


import { Draw, Transport } from "tone";
Transport.schedule((time) => {
 	// use the time argument to schedule a callback with Draw
 	Draw.schedule(() => {
 		// do drawing or DOM manipulation here
 	}, time);
}, "+0.5");

Hierarchy

Constructor

Pass in a constructor as the first argument

new Draw (
context?:BaseContext
) => Draw

Pass in a constructor as the first argument

new Draw (
options?:Partial<ToneWithContextOptions >
) => Draw

Properties

anticipation #

Seconds

The amount of time before the scheduled time that the callback can be invoked. Default is half the time of an animation frame (0.008 seconds).

blockTime #

readonly Seconds

The number of seconds of 1 processing block (128 samples)

context #

BaseContext

The context belonging to the node.

debug #

boolean

Set this debug flag to log all events that happen in this class.

disposed #

readonly boolean

Indicates if the instance was disposed. 'Disposing' an instance means that all of the Web Audio nodes that were created for the instance are disconnected and freed for garbage collection.

expiration #

Seconds

The duration after which events are not invoked.

name #

string

sampleTime #

readonly Seconds

The duration in seconds of one sample.

static version #

string

The version number semver

Methods

cancel #

Cancel events scheduled after the given time

cancel (
after?:Time

Time after which scheduled events will be removed from the scheduling timeline.

) => this

dispose #

disconnect and dispose.

dispose ( ) => this

get #

Get the object's attributes.


import { Oscillator } from "tone";
const osc = new Oscillator();
console.log(osc.get());
// returns {"type" : "sine", "frequency" : 440, ...etc}
get ( ) => ToneWithContextOptions

static getDefaults #

Returns all of the default options belonging to the class.

getDefaults ( ) => ToneWithContextOptions

immediate #

Return the current time of the Context clock without any lookAhead.

immediate ( ) => Seconds

now #

Return the current time of the Context clock plus the lookAhead.

now ( ) => Seconds

schedule #

Schedule a function at the given time to be invoked on the nearest animation frame.

schedule (
callback:() => void ,

Callback is invoked at the given time.

time:Time

The time relative to the AudioContext time to invoke the callback.

) => this

set #

Set multiple properties at once with an object.


import { Filter } from "tone";
const filter = new Filter();
// set values using an object
filter.set({
	frequency: 300,
	type: "highpass"
});
set (
props:RecursivePartial<ToneWithContextOptions >
) => this

toFrequency #

Convert the input to a frequency number

toFrequency (
freq:Frequency
) => Hertz

toSeconds #

Convert the incoming time to seconds

toSeconds (
time?:Time
) => Seconds

toString #

Convert the class to a string


import { Oscillator } from "tone";
const osc = new Oscillator();
console.log(osc.toString());
toString ( ) => string

toTicks #

Convert the input time into ticks

toTicks (
time?:Time | TimeClass
) => Ticks