p5.js MediaElement removeCue() Method

The removeCue() method of p5.MediaElement in p5.js is used to remove the specified cue from the media element. The id returned by the addCue() method is used to identify the cue to be removed.

Syntax:

removeCue( id )

Parameters: This function accepts a single parameter as mentioned above and described below:

• id: It is a number that specifies the id of the cue that is returned by the addCue method.

The examples below illustrate the removeCue() method in p5.js:

Example 1:

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.speed(2.0);
  example_media.showControls();

  rmvBtn =
    createButton("Remove Cue");
  rmvBtn.position(20, 320);
  rmvBtn.mousePressed(removeCues)

  // Using the addCue() method for scheduling
  // the given callback functions
  cue_id =
    example_media.addCue(3, changeColor);
}

function removeCues() {

  clear();

  // Remove the cue associated with
  // the given ID
  example_media.removeCue(cue_id);

  text("Given cue removed!", 20, 360);

  text("The removeCue() method removes " +
       "the given cue", 20, 20);
}

function changeColor() {

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

  text("Background Color Changed!",
       20, 360);

  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, 450);
  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.speed(1.5);
  example_media.showControls();

  rmvBtn =
    createButton("Remove Cue");
  rmvBtn.position(20, 320);
  rmvBtn.mousePressed(removeCues)

  // Using the addCue() method for scheduling
  // the given callback functions
  id1 = example_media.addCue(2, showCueNo, 1);
  id2 = example_media.addCue(4, showCueNo, 2);
  id3 = example_media.addCue(6, showCueNo, 3);
  id4 = example_media.addCue(8, showCueNo, 4);
}

function removeCues() {

  clear();

  // Remove the cue associated with
  // the given ID
  example_media.removeCue(id1);
  example_media.removeCue(id3);

  text("Given cues removed using the " +
       "removeCue() method", 20, 20);

  y = 0;
}

function showCueNo(cue_no) {

  text("This is cue number: " + cue_no,
       20, y + 360);

  y = 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/removeCue