p5.js MediaElement addCue() Method

The addCue() method of p5.MediaElement of p5.js library is used to schedule a certain event to trigger whenever a media element reaches the specified cue point. It accepts a callback function that can be used to specify what action should take place during the event. An optional parameter can also be passed to the callback function using this method.

Syntax:

addCue( time, callback, value)

Parameters: This function accepts three parameters as mentioned above and described below.

• time: It is a number that specifies the time in seconds relative to the media element after which the given callback function would be invoked.
• callback: It is a function that would be called at the given time.
• value: It is an object that is passed as the parameter to the callback function. It is an optional parameter.

Return Value: This method returns a number that denotes the “id” of the added cue. This can be used for later access or removal of the cue.

Example 1: The below example illustrates the addCue() method of p5.js library.

Javascript

function setup() {
  createCanvas(550, 400);
  textSize(18);

  text("The events in addCue() are called " +
       "according to the given time", 20, 20);

  example_media =
    createVideo("sample-video.mp4");
  example_media.size(426, 240);
  example_media.position(20, 60);
  example_media.showControls();

  // Using the addCue() method for specifying
  // the time that the callback function
  // would be called
  example_media.addCue(3, showTime,
                       example_media);
  example_media.addCue(5, showTime,
                       example_media);
  example_media.addCue(8, showTime,
                       example_media);
  example_media.addCue(10, showTime,
                       example_media);
}

function showTime(media) {

  // Set a random background color
  r = random(255);
  g = random(255);
  b = random(255);
  background(r, g, b);

  // Get the media element from the callback
  let mediaTime = media.time();

  text("The current time of the video is: " +
       mediaTime, 20, 340);

    text("The events in addCue() are called " +
       "according to the given time", 20, 20);
}

Output:

Example 2:

Javascript

let y = 0;

function setup() {
  createCanvas(550, 400);
  textSize(18);

  text("The addCue() function is called " +
       "according to the given time", 20, 20);

  example_media =
    createVideo("sample-video.mp4");
  example_media.size(426, 240);
  example_media.position(20, 60);
  example_media.showControls();

  // Using the addCue() method for specifying
  // the time that the callback function
  // would be called
  example_media.addCue(3, changePlaySpeed,
                       0.15);
  example_media.addCue(5, changePlaySpeed,
                       1.0);
  example_media.addCue(8, changePlaySpeed,
                       3.0);
}

function changePlaySpeed(amount) {

  // Get the amount from the callback
  example_media.speed(amount);

  text("The current speed of the video is: "
       + amount, 20, y + 340);

  y += 20;
}

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference:https://p5js.org/reference/#/p5.MediaElement/addCue