### MediaSync Initialization Example
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
A basic example demonstrating how to initialize MediaSync with a video element and a timing object. This sets up the synchronization for the specified media.
```javascript
var video = document.getElementById('vid');
var sync = new timingsrc.MediaSync(video, timingObject);
```
--------------------------------
### .readyState
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Gets the current ready state of the timing provider.
```APIDOC
## .readyState
Getter property for the current state of the timing provider.
```javascript
var state = timingProvider.readyState;
```
* return: {TimingProviderState} The current state of the timing provider.
```
--------------------------------
### Get ReadyState
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Retrieves the current ready state of the timing provider. This indicates whether the provider is connecting, open, closing, or closed.
```javascript
var state = timingProvider.readyState;
```
--------------------------------
### Retrieve All Sequencer Cues
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Use this to get a list of all SequencerCues managed by the Sequencer.
```javascript
s.getCues().forEach(function (cue){});
```
--------------------------------
### Initialize and Configure Sequencer
Source: https://webtiming.github.io/timingsrc/doc/exp_windowsequencer.html
Initializes a Timing Object, creates two skewed timing objects using SkewConverter, and then initializes a Sequencer with these objects. This setup is for defining a moving window for event sequencing.
```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({range:[0,52]});
var toA = new TIMINGSRC.SkewConverter(to, -5.0);
var toB = new TIMINGSRC.SkewConverter(to, 4.0);
// Sequencer
var s = new TIMINGSRC.Sequencer(toA, toB);
```
--------------------------------
### Initialize Timing Object (JavaScript)
Source: https://webtiming.github.io/timingsrc/doc/online_timingobject.html
Initializes a new Timing Object with a specified range. This is the basic setup for a single-device application.
```javascript
var run = function () {
// timing object
var to = new TIMINGSRC.TimingObject({range:[0,100]});
...
};
```
--------------------------------
### Get Version
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Retrieves the current version of the Timing Object implementation.
```APIDOC
## .version
### Description
Getter for version of Timing Object implementation.
### Method
GET (conceptual)
### Endpoint
N/A (property access)
### Parameters
None
### Request Example
```javascript
var version = timingObject.version;
```
### Response
#### Success Response (200)
- **version** (string) - The version string of the Timing Object.
```
--------------------------------
### Single-Page Timing Object Setup
Source: https://webtiming.github.io/timingsrc/doc/hello.html
Include the timingsrc script and create a basic Timing Object for a single-device web application. This is useful for basic timing measurements within a single browser context.
```html
```
--------------------------------
### .range
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Gets the range specified by the timing provider.
```APIDOC
## .range
Getter property for the range specified by the timing provider.
```javascript
var range = timingProvider.range;
```
```
--------------------------------
### .vector
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Gets the current state vector from the timing provider.
```APIDOC
## .vector
Getter property for the current state vector of the timing provider.
```javascript
var vector = timingProvider.vector;
```
* return: {StateVector} The current state vector.
```
--------------------------------
### Retrieve All Active Sequencer Cues
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Use this to get a list of all SequencerCues that are currently active.
```javascript
s.getActiveCues().forEach(function(cue){});
```
--------------------------------
### Load Data into Sequencer
Source: https://webtiming.github.io/timingsrc/doc/exp_windowsequencer.html
Loads cue data into the Sequencer. Each key in the 'data' object corresponds to a cue, with its start and end times defined by an Interval.
```javascript
// Load Data
Object.keys(data).forEach(function (key) {
s.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
```
--------------------------------
### Load Timed Data into Sequencer - JavaScript
Source: https://webtiming.github.io/timingsrc/doc/usage_sequencer.html
Loads an array of timed data objects into the Sequencer. Each object should have 'start', 'end', and 'data' properties. Array indexes are used as keys for the cues.
```javascript
// Timed data
var array = [
{ data: 'A', start: 0, end: 1 },
{ data: 'B', start: 2, end: 3 },
{ data: 'C', start: 4, end: 5 },
{ data: 'D', start: 6, end: 7 },
{ data: 'E', start: 8, end: 9 },
{ data: 'F', start: 10, end: 11 },
{ data: 'G', start: 12, end: 13 },
{ data: 'H', start: 14, end: 15 },
{ data: 'I', start: 16, end: 17 },
{ data: 'J', start: 18, end: 19 },
{ data: 'K', start: 20, end: 21 },
{ data: 'L', start: 22, end: 23 },
{ data: 'M', start: 24, end: 25 },
{ data: 'N', start: 26, end: 27 },
{ data: 'O', start: 28, end: 29 },
{ data: 'P', start: 30, end: 31 },
{ data: 'Q', start: 32, end: 33 },
{ data: 'R', start: 34, end: 35 },
{ data: 'S', start: 36, end: 37 },
{ data: 'T', start: 38, end: 39 },
{ data: 'U', start: 40, end: 41 },
{ data: 'V', start: 42, end: 43 },
{ data: 'W', start: 44, end: 45 },
{ data: 'X', start: 46, end: 47 },
{ data: 'Y', start: 48, end: 49 },
{ data: 'Z', start: 50, end: 51 }
];
// Load timed data, use array indexes as keys into Sequencer
for (var i=0; i
```
--------------------------------
### Initialize TimingObject with a Timing Provider
Source: https://webtiming.github.io/timingsrc/doc/shared_motion.html
Instantiate a TimingObject and pass an online timing provider to its constructor. This is the core step to enable multi-device timing.
```javascript
var run = function (timingProvider) {
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
...
};
```
--------------------------------
### Get Timing Object Version
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Access the version property of the Timing Object to retrieve the implementation version.
```javascript
var version = timingObject.version;
```
--------------------------------
### Initialize MediaSync for Video Elements
Source: https://webtiming.github.io/timingsrc/doc/exp_mediasync.html
Set up two video elements for synchronization using a TimingObject and MCorp.mediaSync. Ensure the video elements have IDs 'player1' and 'player2'.
```javascript
// timing object
var to = new TIMINGSRC.TimingObject({range:[0,100]});
// set up video sync
var sync1 = MCorp.mediaSync(document.getElementById('player1'), to);
// set up video sync
var sync2 = MCorp.mediaSync(document.getElementById('player2'), to);
```
--------------------------------
### Initialize and Configure Sequencer
Source: https://webtiming.github.io/timingsrc/doc/online_windowsequencer.html
Initializes Timing Objects, configures a Sequencer with skewed timing objects, loads data with intervals, and submits the request. This sets up the core components for window sequencing.
```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
var toA = new TIMINGSRC.SkewConverter(to, -5.0);
var toB = new TIMINGSRC.SkewConverter(to, 4.0);
// Sequencer
var s = new TIMINGSRC.Sequencer(toA, toB);
// Load Data
var r = s.request();
Object.keys(data).forEach(function (key) {
r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();
// Register Handlers
s.on("change", function (e) {
var el = document.getElementById(e.key);
el.classList.add("active");
});
s.on("remove", function (e) {
var el = document.getElementById(e.key);
el.classList.remove("active");
});
```
--------------------------------
### Define Linear Data Object
Source: https://webtiming.github.io/timingsrc/doc/background_sequencer.html
Represents a piece of linear data with start and end times for activation.
```javascript
var obj = {
text : "Hello!",
type : "subtitle",
start : 24.3,
end : 28.7
}
```
--------------------------------
### Initialize MCorp App and Motion
Source: https://webtiming.github.io/timingsrc/doc/shared_motion.html
Initialize the MCorp application with your App ID and set up the motion object. This code handles loading the timing provider when the page is ready.
```javascript
var MCORP_MOTION_NAME = "your_motion_name";
var MCORP_APPID = "your_appid";
var app = MCorp.app(MCORP_APPID, {anon:true});
app.run = function () {
var timingProvider = app.motions[MCORP_MOTION_NAME];
if (document.readyState === "complete") {run(timingProvider);}
else {window.onload = function () {run(timingProvider);};}
};
app.init();
```
--------------------------------
### Get Timing Object Range
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Retrieves the current range restrictions set on the timing object's timeline.
```javascript
var range = timingObject.range;
```
--------------------------------
### .skew
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Gets the current estimated skew of the timing provider's clock relative to the client's clock.
```APIDOC
## .skew
Getter property for the current skew estimate of the timing provider. The skew is the difference between the timing provider's clock and the client's clock, measured in seconds.
`clock_timingprovider = clock_client + skew`
```javascript
var skew = timingProvider.skew;
```
* return: {float} The current skew estimate in seconds.
```
--------------------------------
### Initialize MediaSync Object
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Instantiate a MediaSync object by providing the HTML media element, a timing object, and optional configuration settings. The options allow customization of skew, automatic muting, synchronization mode, debugging, target synchronization precision, and persistence of learned settings.
```javascript
var sync = new timingsrc.MediaSync(htmlElement, timingObject, options);
```
--------------------------------
### Initialize and Use Sequencer
Source: https://webtiming.github.io/timingsrc/doc/exp_sequencer.html
Initializes a Timing Object and a Sequencer, loads cue data, and registers handlers for 'change' and 'remove' events to update element styling.
```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({range:[0,52]});
// Sequencer
var s = new TIMINGSRC.Sequencer(to);
// Load data
Object.keys(data).forEach(function (key) {
ss.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
// Register Handlers
s.on("change", function (e) {
var el = document.getElementById(e.key);
el.classList.add("active");
});
s.on("remove", function (e) {
var el = document.getElementById(e.key);
el.classList.remove("active");
});
```
--------------------------------
### Initialize Online Timing Object (JavaScript)
Source: https://webtiming.github.io/timingsrc/doc/online_timingobject.html
Initializes a Timing Object and connects it to an online timing provider, enabling multi-device synchronization. This transforms a single-device demo into a multi-device one.
```javascript
var run = function (timingProvider) {
// timing object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
...
};
```
--------------------------------
### Get Timing Object Vector
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Retrieves the internal state vector of the timing object, which is updated by update() and used by query().
```javascript
var vector = timingObject.vector;
```
--------------------------------
### Initialize and Use Sequencer
Source: https://webtiming.github.io/timingsrc/doc/online_sequencer.html
Initializes a Timing Object and a Sequencer, loads cue data with intervals, and submits it. It also registers handlers for 'change' and 'remove' events to update element styling based on sequencer state.
```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
// Sequencer
var s = new TIMINGSRC.Sequencer(to);
// Load data
var r = s.request();
Object.keys(data).forEach(function (key) {
r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();
// Register Handlers
s.on("change", function (e) {
var el = document.getElementById(e.key);
el.classList.add("active");
});
s.on("remove", function (e) {
var el = document.getElementById(e.key);
el.classList.remove("active");
});
```
--------------------------------
### Get Current Skew
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Retrieve the current skew value being used by the MediaSync object. This can be useful for monitoring or debugging synchronization offsets.
```javascript
sync.getSkew();
```
--------------------------------
### Standard Event Handling Pattern
Source: https://webtiming.github.io/timingsrc/doc/background_eventing.html
Illustrates the common two-step pattern for handling stateful events: first, retrieve the current state, and second, subscribe to future state changes.
```javascript
var state = object.get_state();
do_something_with_state(state);
object.on("change", function () {
var state = object.get_state();
do_something_with_state(state);
});
```
--------------------------------
### Import timingsrc Module in JavaScript
Source: https://webtiming.github.io/timingsrc/doc/index.html
Demonstrates how to import the timingsrc module using a regular script tag or AMD module loader like requirejs.
```javascript
// regular script import - 'TIMINGSRC' property on global object
var timingsrc = TIMINGSRC;
// require js module import
var timingsrc = require("./timingsrc");
// use the module
var timingObject = new timingsrc.TimingObject();
```
--------------------------------
### Create Various Timing Converters
Source: https://webtiming.github.io/timingsrc/doc/exp_timingconverter.html
Demonstrates the creation of different types of timing converters, including Skew, Delay, TimeShift, Scale, Loop, Range, and Derivative converters. Ensure the TIMINGSRC library is available.
```javascript
var to = new TIMINGSRC.TimingObject({range:[0,50]});
var toSkew = new TIMINGSRC.SkewConverter(to, 2);
var toDelay = new TIMINGSRC.DelayConverter(to, 1.0);
var toTimeshift = new TIMINGSRC.TimeShiftConverter(to, -1.0);
var toScale = new TIMINGSRC.ScaleConverter(to, 2);
var toLoop = new TIMINGSRC.LoopConverter(to, [0, 10]);
var toRange = new TIMINGSRC.RangeConverter(to, [10,15]);
var toDerivative = new TIMINGSRC.DerivativeConverter(to);
```
--------------------------------
### Get Sequencer Cues Overlapping an Interval
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Retrieve all SequencerCues whose intervals overlap with the specified search interval. This operation has a logarithmic time complexity O(logN).
```javascript
s.getCuesByInterval(new Interval(4.0, 8.0)).forEach(function(cue){});
```
--------------------------------
### setOption()
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Allows setting or updating specific options of the MediaSync object after initialization.
```APIDOC
## .setOption()
### Description
Set or update options.
### Parameters
* **key** {string} - The name of the option to set.
* **value** {Object} - The new value for the option.
### Example
```javascript
sync.setOption("debug", false); // Disable debugging
sync.setOption("target", 0.1); // Change to coarser target
```
```
--------------------------------
### Create Derivative Converter
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Instantiate a DerivativeConverter with a source timing object. This allows sequencing based on the velocity of the source timing object.
```javascript
var derivativeConverter = new timingsrc.DerivativeConverter(timingObject);
```
--------------------------------
### on()
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Adds an event handler for specified events. Supported events include 'skip', 'mode_change', 'muted', 'target_change', and 'sync'.
```APIDOC
## .on()
### Description
Add an event handler to given events.
### Parameters
* **event** {String} - The name of the event to listen for (e.g., 'skip', 'mode_change', 'muted', 'target_change', 'sync').
* **handler** {Function} - The callback function to execute when the event is triggered.
### Example
```javascript
sync.on("skip", function(e) { console.log("Skipping mode activated"); });
```
```
--------------------------------
### Get Skew
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Retrieves the current skew estimate of the timing provider. Skew represents the difference between the timing provider's clock and the client's clock, measured in seconds.
```javascript
var skew = timingProvider.skew;
```
--------------------------------
### Register and invoke a sequencer event handler
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Demonstrates how to register a handler for the 'change' event on a sequencer instance and shows the expected invocation pattern with a context object.
```javascript
this.handler = function (e) {};
// register callback
s.on("change", this.handler, this);
// callback invocation from sequencer
handler.call(ctx, e);
```
--------------------------------
### JavaScript Timing Converters
Source: https://webtiming.github.io/timingsrc/doc/online_timingconverter.html
Instantiate various timing converters by providing a source timing object and relevant parameters. Ensure the timingProvier is globally available.
```javascript
var to = new TIMINGSRC.TimingObject({provider:timingProvier});
var toSkew = new TIMINGSRC.SkewConverter(to, 2);
var toDelay = new TIMINGSRC.DelayConverter(to, 1.0);
var toTimeshift = new TIMINGSRC.TimeShiftConverter(to, -1.0);
var toScale = new TIMINGSRC.ScaleConverter(to, 2);
var toLoop = new TIMINGSRC.LoopConverter(to, [0, 10]);
var toRange = new TIMINGSRC.RangeConverter(to, [10,15]);
var toDerivative = new TIMINGSRC.DerivativeConverter(to);
```
--------------------------------
### .ready Promise
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Provides a promise that resolves when the timing object is ready.
```APIDOC
## .ready
The timing object also defines a _ready_ promise.
```javascript
timingObject.ready.then(function(){
// now the timing object is ready
});
```
```
--------------------------------
### .isReady()
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Checks if the timing object is ready to be queried. The object is ready when its internal vector and clock are defined.
```APIDOC
## .isReady()
* returns : {boolean}
The timing object becomes ready when its internal vector and clock is defined. Local timing objects are ready immediately after instantiation. However, timing objects depending on a parent timingsrc may not be ready immediately, so as a general rule timing objects should not be queried until after they are ready.
* if not ready, position, velocity and acceleration are undefined.
* event handlers may be registered before the timing object is ready.
```
--------------------------------
### Invoke Callback at Intervals - setIntervalCallback
Source: https://webtiming.github.io/timingsrc/doc/api_timingcallback.html
Use setIntervalCallback to trigger a function at regular intervals based on the timing object's position. The interval is defined by 'length', with an optional 'offset' to adjust the starting point. The returned handle can be used to cancel the callback.
```javascript
var handle = timingsrc.setIntervalCallback(timingObject, callback, length, options);
handle.cancel();
```
--------------------------------
### DelayConverter Initialization
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Initializes a DelayConverter to replay the behavior of a source timing object with a positive time delay. This converter is not live and does not support interactivity.
```javascript
var delayConverter = new timingsrc.DelayConverter(timingObject, delay);
```
--------------------------------
### HTML for Playback Controls
Source: https://webtiming.github.io/timingsrc/doc/usage_sequencer.html
Add these buttons to your HTML to provide user controls for playback.
```html
```
--------------------------------
### Sequencer Readiness Check
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Checks if the Sequencer is ready. Event handlers and cues can be added before the Sequencer is ready, but operations will only be processed once it is.
```javascript
s.ready.then(function(){
// now the sequencer is ready
})
```
--------------------------------
### Sequencer Constructor (Window Sequencing Mode)
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Initializes a Sequencer object for window sequencing mode using two timing objects. In this mode, SequencerCues are provided with events instead of EArg.
```javascript
var s = new TIMINGSRC.Sequencer(timingObjectA, timingObjectB);
```
--------------------------------
### getMethod()
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Returns a string indicating the current synchronization method being used by the MediaSync object ('skip' or 'playbackrate').
```APIDOC
## .getMethod()
### Description
Returns the currently used method for synchronization.
### Returns
* {String} The method used: “skip” or “playbackrate”.
### Example
```javascript
var method = sync.getMethod();
```
```
--------------------------------
### MediaSync Constructor
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Initializes a new MediaSync object to synchronize an HTMLMediaElement with a timing object. Options can be provided to customize synchronization behavior, such as skew, automute, and synchronization mode.
```APIDOC
## Constructor MediaSync
### Description
Returns a media sync object.
### Parameters
* **htmlElement** {HTMLMediaElement} - The HTMLMediaElement to synchronize.
* **timingObject** {Object} - The timing object to synchronize after.
* **options** {Object} - Optional configuration for synchronization.
* **options.skew** {float} - (default 0.0) Seconds to add to the timingObject before synchronization.
* **options.automute** {boolean} - (default true) Mute the media element when playing too fast or too slow.
* **options.mode** {String} - (default “auto”) Synchronization mode: “skip”, “vpbr”, or “auto”.
* **options.debug** {Object} - (default null) Enable console logging or provide a callback function for debug info.
* **options.target** {Float} - (default 0.025) Target for synchronization in seconds (ignored in variable playback rate mode).
* **options.remember** {Boolean} - (default true) Remember the last experience on this device for variable playback rate support.
### Returns
* {Object} mediaSync object
```
--------------------------------
### LocalConverter Initialization
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Initializes a LocalConverter to remove update latency from online timing providers by applying vector changes locally and speculatively. Useful for maintaining UI responsiveness.
```javascript
var localConverter = new timingsrc.LocalConverter(timingObject);
```
--------------------------------
### Sequencer Constructor (Single Timing Object)
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Initializes a Sequencer object with a single timing object. The Sequencer becomes operational once the timing object is ready.
```javascript
var s = new TIMINGSRC.Sequencer(timingObject);
```
--------------------------------
### Iterate through Sequencer Cue Keys
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Use this to iterate over all defined SequencerCue keys.
```javascript
s.keys().forEach(function (key){});
```
--------------------------------
### Iterate through Active Sequencer Cue Keys
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Use this to iterate over the keys of all currently active SequencerCues.
```javascript
s.getActiveKeys().forEach(function(key){});
```
--------------------------------
### Timing Object Constructor
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Instantiates a new TimingObject. Options can specify range, initial vector, or a parent timingsrc.
```javascript
var timingObject = new timingsrc.TimingObject(options);
```
--------------------------------
### Create a Cue with Interval
Source: https://webtiming.github.io/timingsrc/doc/background_sequencer.html
Defines a cue as a key-interval pair, linking data to timing. The datamodel stores the actual data associated with the key.
```javascript
var cue = {
key : "unique key",
interval : new Interval(24.3,28.7)
};
datamodel["unique key"] = {text: "Hello!", type: "subtitle"};
```
--------------------------------
### .on()
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Registers an event handler for specified event types.
```APIDOC
## .on(type, handler, ctx)
Registers an event handler on the timing provider.
```javascript
timingProvider.on(type, handler, ctx);
```
* param: {String} [type] Event type: `"vectorchange"`, `"skewchange"`, or `"readystatechange"`.
* param: {Function} [handler] The event handler function.
* param: optional {Object} [ctx] The context for the handler callback. Defaults to the timing provider itself.
```
--------------------------------
### Dynamically Switch Event Sources in timingsrc
Source: https://webtiming.github.io/timingsrc/doc/background_eventing.html
Demonstrates how to switch between event sources in timingsrc. Due to initial event semantics, the component will adopt the state of the new source, appearing as a regular change event to consumers. Ensure any cached state is cleared before connecting to a new source.
```javascript
old_timingsrc.off("change", handler);
new_timingsrc.on("change", handler);
```
--------------------------------
### Event Handling
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Details the event types and handling mechanisms for Sequencer changes.
```APIDOC
### Events
The Sequencer supports three event types: `"change"`, `"remove"`, and `"events"`.
- **"change"**: Fired when a cue becomes active or remains active.
- **"remove"**: Fired when a cue becomes inactive.
- **"events"**: Fired for a batch of events, including both "change" and "remove" events.
### Initial Events
When registering an event handler, the Sequencer provides initial events corresponding to the current active cues. This allows for building the current state through a single event handler.
### Enter and Exit Flags
Events include `_enter_` and `_exit_` boolean flags:
- **_enter_**: `true` if the cue transitioned from inactive (or non-existent) to active.
- **_exit_**: `true` if the cue transitioned from active to inactive (or non-existent).
These flags indicate changes in the active cue set. Both flags can be false if a cue changed but remained active. They cannot both be true simultaneously.
```
--------------------------------
### Sequencer Readiness
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Checks if the sequencer is ready. Readiness is determined by the timing object being ready and necessary initialization being completed. Event handlers and cues can be added before the sequencer is ready.
```APIDOC
### Readiness
The sequencer becomes ready when its timing object is ready and necessary initialization is done.
* Event handlers may be registered before the sequencer is ready.
* Cues may also be added before the sequencer is ready
The sequencer also defines a _ready_ promise, although this is typically not important as handlers and cues may be added without regard for readiness.
#### .isReady()
* returns : {boolean}
```javascript
s.ready.then(function(){
// now the sequencer is ready
})
```
```
--------------------------------
### .query()
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Returns a snapshot StateVector of the timing object's current state.
```APIDOC
## .query()
Returns a snapshot vector of the timing object
```javascript
var vector = timingObject.query();
```
* return: {StateVector} current state
```
--------------------------------
### Sequencer Constructor
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Initializes a new Sequencer object. It can be used in single timing object mode or window sequencing mode with two timing objects.
```APIDOC
## Sequencer: Constructor
Returns a Sequencer object. There is no need to start the Sequencer. Execution is driven by the given timing object, and the Sequencer is operational when the constructed finalizes.
```javascript
var s = new TIMINGSRC.Sequencer(timingObject);
```
* param: {object} [timingObject] The TimingObject that drives the execution of the Sequencer.
The Sequencer additionally supports window sequencing mode. To do window sequencing with the Sequencer, simply specify two timing objects in the constructor. Note that in window sequencing mode the Sequencer provides SequencerCues with events instead of EArg.
```javascript
var s = new TIMINGSRC.Sequencer(timingObjectA, timingObjectB);
```
* param: {object} [timingObjectA] Timing object A represents one endpoint of the _active interval_ of the IntervaSequencer.
* param: {object} [timingObjectB] Timing object B represents the other endpoint of the _active interval_ of the IntervaSequencer.
```
--------------------------------
### Include MediaSync Library
Source: https://webtiming.github.io/timingsrc/doc/exp_mediasync.html
Include the MediaSync JavaScript library in your HTML to enable its functionality.
```html
```
--------------------------------
### Timing Object Ready Promise
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Handles the timing object's ready state using a promise. Event handlers can be registered before the object is ready.
```javascript
timingObject.ready.then(function(){
// now the timing object is ready
});
```
--------------------------------
### JavaScript for Playback Controls
Source: https://webtiming.github.io/timingsrc/doc/usage_sequencer.html
Connect the HTML buttons to the timing object to control playback. Ensure the timingObject is globally accessible.
```javascript
document.getElementById('play').onclick = function () {timingObject.update({velocity:1.0});};
document.getElementById('pause').onclick = function () {timingObject.update({velocity:0.0});};
document.getElementById('reset').onclick = function () {timingObject.update({position: 0.0});};
```
--------------------------------
### ScaleConverter Initialization
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Initializes a ScaleConverter to stretch or compress the timeline of a source timing object by a given factor. A factor greater than 1 slows down the perceived speed, while a factor less than 1 speeds it up.
```javascript
var scaleConverter = new timingsrc.ScaleConverter(timingObject, factor);
```
--------------------------------
### .addCue(key, interval, data)
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Associates a unique key with an Interval and a data object. If a cue with the same key already exists, it will be replaced. Modifications to a cue require generating a new Interval and using addCue with the same key.
```APIDOC
#### .addCue(key, interval, data)
* param: {string} [key] unique key identifying an Interval.
* param: {Interval} [interval] defines when the associated key is active.
* param: {Object} [data] application object associated with key and interval
* returns : {undefined}
Associate a unique key with an Interval and a data object. addCue() will replace any previous association for given key. Since Intervals are immutable objects, modification of a cue must be be done by generating a new Interval and replacing the association using .addCue() with the same key.
> The keyspace is designed by the programmer. In this regard, the Sequencer is essentially an associative array for (Interval, data) tuples. Often, application specific datamodels include unique keys of some sort, and these may be used directly with the sequencer. These application specific keys are then reported back to application code by correctly timed Sequencer events. Intervals define when keys are _active_. So, when the current position of the timing object enters an Interval, the associated key becomes _active_.
```javascript
s.addCue("key", new Interval(12.1, 24.22), {value:42});
```
```
--------------------------------
### JavaScript Implementation of Timing Object Controls
Source: https://webtiming.github.io/timingsrc/doc/exp_timingobject.html
Initializes a Timing Object and sets up event listeners for UI interactions. Updates the display with current position, velocity, and acceleration upon time updates and handles button clicks for controlling the Timing Object.
```javascript
// timing object
var to = new TIMINGSRC.TimingObject({range:[0,100]});
// Hook up text UI
var value = document.getElementById('position');
to.on("timeupdate", function () {
var v = to.query();
var html = "P: " + v.position.toFixed(2);
html += ", V: " + v.velocity.toFixed(2);
html += ", A: " + v.acceleration.toFixed(2);
value.innerHTML = html;
});
// Hook up buttons UI
var buttonsEl = document.getElementById("buttons");
buttonsEl.onclick = function (e) {
var elem, evt = e ? e:event;
if (evt.srcElement) elem = evt.srcElement;
else if (evt.target) elem = evt.target;
if (elem.id === "reset") to.update({position:0.0});
else if (elem.id === "pause") to.update({velocity:0.0, acceleration:0.0});
else if (elem.id === "play") to.update({velocity:1.0, acceleration:0.0});
else if (elem.id === "end") to.update({position:100.0});
else { // relative
var v = to.query();
if (elem.id === "p-") to.update({position:v.position - 1});
else if (elem.id === "p+") to.update({position: v.position + 1});
else if (elem.id === "v-") to.update({velocity: v.velocity - 1});
else if (elem.id === "v+") to.update({velocity: v.velocity + 1});
else if (elem.id === "a-") to.update({acceleration: v.acceleration - 1});
else if (elem.id === "a+") to.update({acceleration: v.acceleration + 1});
}
}
```
--------------------------------
### TimeshiftConverter Initialization
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Initializes a TimeshiftConverter to shift the timing of a source object by a positive or negative time offset. This converter is live and supports speculative execution ahead of the source.
```javascript
var timeshiftConverter = new timingsrc.TimeshiftConverter(timingObject, timeoffset);
```
--------------------------------
### Set Point Callback (Once)
Source: https://webtiming.github.io/timingsrc/doc/online_timingcallback.html
Generates a callback the first time a specific position on the timeline is reached. Ensure the Timing Object is initialized.
```javascript
TIMINGSRC.setPointCallback(to, function () {
append("point callback (once) at position " + to.query().position.toFixed(2));
}, 4);
```
--------------------------------
### Connecting to a Timing Provider
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Connects a timing object to an external timing provider, another timing object, or a timing converter by assigning it to the timingsrc property.
```javascript
// connecting timing object with external timing provider
timingObject.timingsrc = timingProvider;
// disconnecting timing object from external timing provider
timingObject.timingsrc = undefined;
// connecting timingobject to another timing object
timingObject.timingsrc = anotherTimingObject;
```
--------------------------------
### .on(type, handler, ctx)
Source: https://webtiming.github.io/timingsrc/doc/api_timingobject.html
Registers an event handler for a specified event type on the timing object.
```APIDOC
## .on()
Registers an event handler on the timing object.
```javascript
timingObject.on(type, handler, ctx);
```
* param: {String} [type] event type [“change”,”timeupdate”]
* param: {Function} [handler] event handler
* param: optional {Object} [ctx] context for handler callback invocation, default is timingObject
```
--------------------------------
### TimingProviderState
Source: https://webtiming.github.io/timingsrc/doc/api_timingprovider.html
Defines the possible states for a timing provider.
```APIDOC
## TimingProviderState
This object defines the possible states for a timing provider. The `OPEN` state indicates that `skew` and `vector` properties are available.
```javascript
var TimingProviderState = Object.freeze({
CONNECTING:"connecting",
OPEN: "open",
CLOSING: "closing",
CLOSED: "closed"
});
```
```
--------------------------------
### getSkew()
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Retrieves the current skew value of the MediaSync object.
```APIDOC
## .getSkew()
### Description
Get the current skew.
### Returns
* {double} The current skew value.
### Example
```javascript
var currentSkew = sync.getSkew();
```
```
--------------------------------
### Batch Add Cues
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Adds multiple cues to the Sequencer in a batch operation using `forEach`. Note that `addCue` operations are processed asynchronously on the JavaScript event queue.
```javascript
cueList.forEach(function (cue) {
s.addCue(cue.key, cue.interval, cue.data);
});
```
--------------------------------
### Event Handler Registration
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Register a callback function to handle specific events emitted by the Sequencer. The handler can optionally be bound to a specific context.
```APIDOC
## .on(type, handler, ctx)
### Description
Registers an event handler for a specified event type.
### Parameters
#### Parameters
- **type** (string) - The type of event to listen for (e.g., "change", "remove").
- **handler** (function) - The callback function to execute when the event is triggered.
- **ctx** (object, optional) - The context (`this`) to be used within the event handler. If not provided, `this` will refer to the Sequencer instance.
### Request Example
```javascript
var handler = function (e) {};
// Register handler for 'change' event with a specific context
s.on("change", handler, this);
// Callback invocation from sequencer
handler.call(ctx, e);
```
### Response
This method does not return a value.
```
--------------------------------
### Add Event Handler
Source: https://webtiming.github.io/timingsrc/doc/api_mediasync.html
Register a callback function to be executed when specific MediaSync events occur. Supported events include 'skip', 'mode_change', 'muted', 'target_change', and 'sync'.
```javascript
sync.on("skip", function(e) { ... });
```
--------------------------------
### HTML Structure for Timing Object Controls
Source: https://webtiming.github.io/timingsrc/doc/exp_timingobject.html
Defines the HTML elements for controlling and displaying the state of a Timing Object. Includes buttons for absolute and relative time adjustments and a div for displaying position, velocity, and acceleration.
```html
```
--------------------------------
### Multi-Device Timing Object Connection
Source: https://webtiming.github.io/timingsrc/doc/hello.html
Include timingsrc and a third-party script (e.g., from Motion Corporation) to connect a local Timing Object to online motion data. This enables synchronization across multiple devices or with external motion sources.
```html
```
--------------------------------
### Include MCorp Script
Source: https://webtiming.github.io/timingsrc/doc/shared_motion.html
Include the MCorp JavaScript library in your web page to enable communication with the Shared Motion service.
```html
```
--------------------------------
### Set Point Callback (Repeat)
Source: https://webtiming.github.io/timingsrc/doc/online_timingcallback.html
Generates callbacks every time a specific position on the timeline is reached. Use the 'repeat: true' option for continuous triggering.
```javascript
TIMINGSRC.setPointCallback(to, function () {
append("point callback (repeated) at position " + to.query().position.toFixed(2));
}, 6, {repeat:true});
```
--------------------------------
### DerivativeConverter Constructor
Source: https://webtiming.github.io/timingsrc/doc/api_timingconverter.html
Initializes a new instance of the DerivativeConverter class, which converts the derivative movements of a source timing object.
```APIDOC
## DerivativeConverter Constructor
### Description
Initializes a new instance of the DerivativeConverter class. The derivative converter allows sequencing on the velocity of a timing object by attaching it to a sequencer.
### Method
`new timingsrc.DerivativeConverter(timingObject)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Parameters
- **timingObject** (Object) - Required - The source timing object whose velocity will be used as the position for the derivative converter.
### Request Example
```javascript
var derivativeConverter = new timingsrc.DerivativeConverter(timingObject);
```
### Response
#### Success Response (200)
Returns the initialized DerivativeConverter object.
#### Response Example
```json
{
"example": "DerivativeConverter object"
}
```
```
--------------------------------
### Interval Constructor
Source: https://webtiming.github.io/timingsrc/doc/api_sequencer.html
Constructs a new Interval object. Intervals define the temporal range during which a key is considered active.
```APIDOC
## Interval: Constructor
```javascript
var i = new TIMINGSRC.Interval(low, high, lowInclude, highInclude);
```
* param: {float} [low] value of lower endpoint of interval
* param: {float} [high] value of higher endpoint of interval
* param: optional {boolean} [lowInclude] lower endpoint included in interval : default true
* param: optional {boolean} [highInclude] higher endpoint included in interval : default false
* returns : {Interval} Interval object
```