Audio Incidents

There are three Audio Incidents provided by MotorCortex:

• AudioClip
• AudioPlayback
• AudioEffect

AudioPlayback

The AudioPlayback Incident selects a sound (via the use of selector) that has been loaded on its Clip’s audioSources and executes it. The AudioPlayback takes one argument (only the props) which is an object supporting the following keys:

• selector (string)
• startFrom (int / millisecond)
• duration (int / millisecond)

Example:

const MyClip = new HTMLClip({
  html: `....`,
  css: `....`,
  audioSources: [
    {
      src: "./my.mp3",
      id: "my-mp3",
      classes: ["songs", "rock"],
      base64: false,
    },
    {
      src: "T2dnUwACAAAAAAAAAAA+HAAAAAAAAGyawCEBQGZpc2hlYWQAAwA...",
      id: "yeah",
      classes: ["samples", "rock"],
      base64: true,
    },
  ],
});

const songPlayback = new MotorCortex.AudioPlayback({
  selector: "~#my-mp3",
  startFrom: 12000,
  duration: 60000,
});

MyClip.addIncident(songPlayback, 1000);

The AudioPlayback Incident of this example will play audioSource with id=”my-mp3” starting from millisecond 12000 and for 60000 milliseconds. Notice the “~” on the start of the selector. This character in the beginning of the selector indicates that the selector is targeting an audioSource. The selector continues with the common CSS-like syntax with the “#” character indicating we are selecting by id, followed by the id name. If we want to select audioSources by class we could use a syntax such as ~.rock

AudioEffect

The AudioEffect Incident allows us to apply effects on two attributes of audioSources:

• gain
• pan

“gain” refers to the volume of the audioSource (with values from 0 to 1) while “pan” to the stereo pan of it (with supported values from -1 for left to 1 for right). Be default all audioSources have initial values 1 for gain and 0 (middle) for pan, unless if you set different startValues on the audioSources of the Clip.

AudioEffect can be defined and added to the Clip exactly as any other Incident:

const MyClip = new HTMLClip({
  html: `....`,
  css: `....`,
  audioSources: [
    {
      src: "./my.mp3",
      id: "my-mp3",
      classes: ["songs", "rock"],
      base64: false,
    },
    {
      src: "T2dnUwACAAAAAAAAAAA+HAAAAAAAAGyawCEBQGZpc2hlYWQAAwA...",
      id: "yeah",
      classes: ["samples", "rock"],
      base64: true,
    },
  ],
});

const songPlayback = new MotorCortex.AudioPlayback({
  selector: "~#my-mp3",
  startFrom: 12000,
  duration: 60000,
});

/*
This Incident will “animate” the pan of the selected audioSource to left and its gain to 0.5 in 3000 milliseconds_
*/

const effect = new MotorCortex.AudioEffect(
  {
    animatedAttrs: {
      pan: -1,
      gain: 0.5,
    },
  },
  {
    selector: "~#my-mp3",
    duration: 3000,
  }
);

MyClip.addIncident(songPlayback, 1000);
MyClip.addIncident(effect, 58000);

AudioClip

AudioClip is a kind of Clip that can only accept audioSources, nothing else. Its only context consists of audioSources. AudioClips do not take selectors and they can be added on any other Clip’s or AudioClip’s timeline.

const MyAudioClip = new MC.AudioClip({
  audioSources: [
    {
      src: "./my.mp3",
      id: "my-mp3",
      classes: ["songs", "rock"],
      base64: false,
    },
    {
      src: "T2dnUwACAAAAAAAAAAA+HAAAAAAAAGyawCEBQGZpc2hlYWQAAwA...",
      id: "yeah",
      classes: ["samples", "rock"],
      base64: true,
    },
  ],
});

const songPlayback = new MotorCortex.AudioPlayback({
  selector: "~#my-mp3",
  startFrom: 12000,
  duration: 60000,
});

MyClip.addIncident(songPlayback, 1000);

Example (codesandbox)