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:
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:
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/amp/
Reference: https://p5js.org/reference/#/p5.MediaElement/removeCue