Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

p5.js MediaElement removeCue() Method

  • Last Updated : 29 Sep, 2020

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!