p5
Version:
[](https://www.npmjs.com/package/p5)
1,250 lines (1,196 loc) • 33.8 kB
TypeScript
// This file is auto-generated from JSDoc documentation
import p5 from 'p5';
declare module 'p5' {
class MediaElement extends Element {
constructor(elt: string);
/**
* Plays audio or video from a media element.
*/
play(): void;
/**
* Stops a media element and sets its current time to 0.Calling `media.play()` will restart playing audio/video from the beginning.
*/
stop(): void;
/**
* Pauses a media element.Calling `media.play()` will resume playing audio/video from the moment it paused.
*/
pause(): void;
/**
* Plays the audio/video repeatedly in a loop.
*/
loop(): void;
/**
* Stops the audio/video from playing in a loop.The media will stop when it finishes playing.
*/
noLoop(): void;
/**
* Sets the audio/video to play once it's loaded.The parameter, `shouldAutoplay`, is optional. Calling
* `media.autoplay()` without an argument causes the media to play
* automatically. If `true` is passed, as in `media.autoplay(true)`, the
* media will automatically play. If `false` is passed, as in
* `media.autoPlay(false)`, it won't play automatically.
*
* @param
* @param
*/
autoplay(val: any, shouldAutoplay: boolean): void;
/**
* Sets the audio/video volume.Calling `media.volume()` without an argument returns the current volume
* as a number in the range 0 (off) to 1 (maximum).The parameter, `val`, is optional. It's a number that sets the volume
* from 0 (off) to 1 (maximum). For example, calling `media.volume(0.5)`
* sets the volume to half of its maximum.
*
* @param
*/
volume(val: any): number;
volume(val: number): void;
/**
* Sets the audio/video playback speed.The parameter, `val`, is optional. It's a number that sets the playback
* speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
* plays it at double speed, and so on. -1 plays the media at normal speed
* in reverse.Calling `media.speed()` returns the current speed as a number.Note: Not all browsers support backward playback. Even if they do,
* playback might not be smooth.
*
* @param
*/
speed(val: any): number;
speed(val: any, speed: number): void;
/**
* Sets the media element's playback time.The parameter, `time`, is optional. It's a number that specifies the
* time, in seconds, to jump to when playback begins.Calling `media.time()` without an argument returns the number of seconds
* the audio/video has played.Note: Time resets to 0 when looping media restarts.
*
* @param
*/
time(val: any): number;
time(val: any, time: number): void;
/**
* Returns the audio/video's duration in seconds.
*/
duration(): number;
/**
* Calls a function when the audio/video reaches the end of its playback.The element is passed as an argument to the callback function.Note: The function won't be called if the media is looping.
*
* @param
*/
onended(callback: Function): void;
/**
* Sends the element's audio to an output.The parameter, `audioNode`, can be an `AudioNode` or an object from the
* `p5.sound` library.If no element is provided, as in `myElement.connect()`, the element
* connects to the main output. All connections are removed by the
* `.disconnect()` method.Note: This method is meant to be used with the p5.sound.js addon library.
*
* @param
* @param
*/
connect(obj: any, audioNode: AudioNode | object): void;
/**
* Disconnect all Web Audio routing, including to the main output.This is useful if you want to re-route the output through audio effects,
* for example.
*/
disconnect(): void;
/**
* Show the default
* HTMLMediaElement
* controls.Note: The controls vary between web browsers.
*/
showControls(): void;
/**
* Hide the default
* HTMLMediaElement
* controls.
*/
hideControls(): void;
/**
* Schedules a function to call when the audio/video reaches a specific time
* during its playback.The first parameter, `time`, is the time, in seconds, when the function
* should run. This value is passed to `callback` as its first argument.The second parameter, `callback`, is the function to call at the specified
* cue time.The third parameter, `value`, is optional and can be any type of value.
* `value` is passed to `callback`.Calling `media.addCue()` returns an ID as a string. This is useful for
* removing the cue later.
*
* @param
* @param
* @param
* @param
*/
addCue(time: number, callback: Function, val: any, value: object): number;
/**
* Removes a callback based on its ID.
*
* @param
*/
removeCue(id: number): void;
/**
* Removes all functions scheduled with `media.addCue()`.
*/
clearCues(): void;
}
/**
* Creates a `<video>` element for simple audio/video playback.`createVideo()` returns a new
* p5.MediaElement object. Videos are shown by
* default. They can be hidden by calling `video.hide()` and drawn to the
* canvas using image().The first parameter, `src`, is the path the video. If a single string is
* passed, as in `'assets/topsecret.mp4'`, a single video is loaded. An array
* of strings can be used to load the same video in different formats. For
* example, `['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']`.
* This is useful for ensuring that the video can play across different browsers with
* different capabilities. See
* MDN
* for more information about supported formats.The second parameter, `callback`, is optional. It's a function to call once
* the video is ready to play.
*
* @param path to a video file, or an array of paths for
* supporting different browsers.
* @param function to call once the video is ready to play.
* @return new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
* @example <div class='notest'>
* <code>
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Note: this may not work in some browsers.
* let video = createVideo('assets/small.mp4');
*
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
* </code>
* </div>
*
* <div class='notest'>
* <code>
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Provide an array options for different file formats.
* let video = createVideo(
* ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']
* );
*
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
* </code>
* </div>
*
* <div class='notest'>
* <code>
* let video;
*
* function setup() {
* noCanvas();
*
* // Load a video and add it to the page.
* // Provide an array options for different file formats.
* // Call mute() once the video loads.
* video = createVideo(
* ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
* muteVideo
* );
*
* // Show the default video controls.
* video.showControls();
*
* describe('A video of a toy robot with playback controls beneath it.');
* }
*
* // Mute the video once it loads.
* function muteVideo() {
* video.volume(0);
* }
* </code>
* </div>
*/
function createVideo(src: string | string[], callback?: Function): p5.MediaElement;
/**
* AUDIO STUFF *
*
*/
function createAudio(src: any, callback: any): void;
/**
* Creates a hidden `<audio>` element for simple audio playback.`createAudio()` returns a new
* p5.MediaElement object.The first parameter, `src`, is the path the video. If a single string is
* passed, as in `'assets/video.mp4'`, a single video is loaded. An array
* of strings can be used to load the same video in different formats. For
* example, `['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm']`.
* This is useful for ensuring that the video can play across different
* browsers with different capabilities. See
* MDN
* for more information about supported formats.The second parameter, `callback`, is optional. It's a function to call once
* the audio is ready to play.
*
* @param path to an audio file, or an array of paths
* for supporting different browsers.
* @param function to call once the audio is ready to play.
* @return new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
* @example <div class='notest'>
* <code>
* function setup() {
* noCanvas();
*
* // Load the audio.
* let beat = createAudio('assets/beat.mp3');
*
* // Show the default audio controls.
* beat.showControls();
*
* describe('An audio beat plays when the user double-clicks the square.');
* }
* </code>
* </div>
*/
function createAudio(src?: string | string[], callback?: Function): p5.MediaElement;
/**
* Creates a `<video>` element that "captures" the audio/video stream from
* the webcam and microphone.`createCapture()` returns a new
* p5.MediaElement object. Videos are shown by
* default. They can be hidden by calling `capture.hide()` and drawn to the
* canvas using image().The first parameter, `type`, is optional. It sets the type of capture to
* use. By default, `createCapture()` captures both audio and video. If `VIDEO`
* is passed, as in `createCapture(VIDEO)`, only video will be captured.
* If `AUDIO` is passed, as in `createCapture(AUDIO)`, only audio will be
* captured. A constraints object can also be passed to customize the stream.
* See the
* W3C documentation for possible properties. Different browsers support different
* properties.The 'flipped' property is an optional property which can be set to `{flipped:true}`
* to mirror the video output.If it is true then it means that video will be mirrored
* or flipped and if nothing is mentioned then by default it will be `false`.The second parameter,`callback`, is optional. It's a function to call once
* the capture is ready for use. The callback function should have one
* parameter, `stream`, that's a
* MediaStream object.Note: `createCapture()` only works when running a sketch locally or using HTTPS. Learn more
* here
* and here.
*
* @param type of capture, either AUDIO or VIDEO,
* or a constraints object. Both video and audio
* audio streams are captured by default.
* @param flip the capturing video and mirror the output with `{flipped:true}`. By
* default it is false.
* @param function to call once the stream
* has loaded.
* @return new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
* @example <div class='notest'>
* <code>
* function setup() {
* noCanvas();
*
* // Create the video capture.
* createCapture(VIDEO);
*
* describe('A video stream from the webcam.');
* }
* </code>
* </div>
*
* <div class='notest'>
* <code>
* let capture;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create the video capture and hide the element.
* capture = createCapture(VIDEO);
* capture.hide();
*
* describe('A video stream from the webcam with inverted colors.');
* }
*
* function draw() {
* // Draw the video capture within the canvas.
* image(capture, 0, 0, width, width * capture.height / capture.width);
*
* // Invert the colors in the stream.
* filter(INVERT);
* }
* </code>
* </div>
* <div class='notest'>
* <code>
* let capture;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create the video capture with mirrored output.
* capture = createCapture(VIDEO,{ flipped:true });
* capture.size(100,100);
*
* describe('A video stream from the webcam with flipped or mirrored output.');
* }
*
* </code>
* </div>
*
* <div class='notest norender'>
* <code>
* function setup() {
* createCanvas(480, 120);
*
* // Create a constraints object.
* let constraints = {
* video: {
* mandatory: {
* minWidth: 1280,
* minHeight: 720
* },
* optional: [{ maxFrameRate: 10 }]
* },
* audio: false
* };
*
* // Create the video capture.
* createCapture(constraints);
*
* describe('A video stream from the webcam.');
* }
* </code>
* </div>
*/
function createCapture(...args: any[], type?: AUDIO | VIDEO | object, flipped?: object, callback?: Function): p5.MediaElement;
/**
* Helpers for create methods.
*
*/
function addElement(elt: any, pInst: any, media: any): void;
/**
* Plays audio or video from a media element.
*
* @example <div>
* <code>
* let beat;
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display a message.
* text('Click to play', 50, 50);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks the square.');
* }
*
* // Play the beat when the user presses the mouse.
* function mousePressed() {
* beat.play();
* }
* </code>
* </div>
*/
function play(): void;
/**
* Stops a media element and sets its current time to 0.Calling `media.play()` will restart playing audio/video from the beginning.
*
* @example <div>
* <code>
* let beat;
* let isStopped = true;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to start" written in black on a gray background. The beat starts or stops when the user presses the mouse.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display different instructions based on playback.
* if (isStopped === true) {
* text('Click to start', 50, 50);
* } else {
* text('Click to stop', 50, 50);
* }
* }
*
* // Adjust playback when the user presses the mouse.
* function mousePressed() {
* if (isStopped === true) {
* // If the beat is stopped, play it.
* beat.play();
* isStopped = false;
* } else {
* // If the beat is playing, stop it.
* beat.stop();
* isStopped = true;
* }
* }
* </code>
* </div>
*/
function stop(): void;
/**
* Pauses a media element.Calling `media.play()` will resume playing audio/video from the moment it paused.
*
* @example <div>
* <code>
* let beat;
* let isPaused = true;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. The beat plays or pauses when the user clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display different instructions based on playback.
* if (isPaused === true) {
* text('Click to play', 50, 50);
* } else {
* text('Click to pause', 50, 50);
* }
* }
*
* // Adjust playback when the user presses the mouse.
* function mousePressed() {
* if (isPaused === true) {
* // If the beat is paused,
* // play it.
* beat.play();
* isPaused = false;
* } else {
* // If the beat is playing,
* // pause it.
* beat.pause();
* isPaused = true;
* }
* }
* </code>
* </div>
*/
function pause(): void;
/**
* Plays the audio/video repeatedly in a loop.
*
* @example <div>
* <code>
* let beat;
* let isLooping = false;
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to loop" written in black on a gray background. A beat plays repeatedly in a loop when the user clicks. The beat stops when the user clicks again.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display different instructions based on playback.
* if (isLooping === true) {
* text('Click to stop', 50, 50);
* } else {
* text('Click to loop', 50, 50);
* }
* }
*
* // Adjust playback when the user presses the mouse.
* function mousePressed() {
* if (isLooping === true) {
* // If the beat is looping, stop it.
* beat.stop();
* isLooping = false;
* } else {
* // If the beat is stopped, loop it.
* beat.loop();
* isLooping = true;
* }
* }
* </code>
* </div>
*/
function loop(): void;
/**
* Stops the audio/video from playing in a loop.The media will stop when it finishes playing.
*
* @example <div>
* <code>
* let beat;
* let isPlaying = false;
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* describe('The text "Click to play" written in black on a gray background. A beat plays when the user clicks. The beat stops when the user clicks again.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display different instructions based on playback.
* if (isPlaying === true) {
* text('Click to stop', 50, 50);
* } else {
* text('Click to play', 50, 50);
* }
* }
*
* // Adjust playback when the user presses the mouse.
* function mousePressed() {
* if (isPlaying === true) {
* // If the beat is playing, stop it.
* beat.stop();
* isPlaying = false;
* } else {
* // If the beat is stopped, play it.
* beat.play();
* isPlaying = true;
* }
* }
* </code>
* </div>
*/
function noLoop(): void;
/**
* Sets the audio/video to play once it's loaded.The parameter, `shouldAutoplay`, is optional. Calling
* `media.autoplay()` without an argument causes the media to play
* automatically. If `true` is passed, as in `media.autoplay(true)`, the
* media will automatically play. If `false` is passed, as in
* `media.autoPlay(false)`, it won't play automatically.
*
* @param whether the element should autoplay.
* @example <div class='notest'>
* <code>
* let video;
*
* function setup() {
* noCanvas();
*
* // Call handleVideo() once the video loads.
* video = createVideo('assets/fingers.mov', handleVideo);
*
* describe('A video of fingers walking on a treadmill.');
* }
*
* // Set the video's size and play it.
* function handleVideo() {
* video.size(100, 100);
* video.autoplay();
* }
* </code>
* </div>
*
* <div class='notest'>
* <code>
* function setup() {
* noCanvas();
*
* // Load a video, but don't play it automatically.
* let video = createVideo('assets/fingers.mov', handleVideo);
*
* // Play the video when the user clicks on it.
* video.mousePressed(handlePress);
*
* describe('An image of fingers on a treadmill. They start walking when the user double-clicks on them.');
* }
* </code>
* </div>
*
* // Set the video's size and playback mode.
* function handleVideo() {
* video.size(100, 100);
* video.autoplay(false);
* }
*
* // Play the video.
* function handleClick() {
* video.play();
* }
*/
function autoplay(val: any, shouldAutoplay?: boolean): void;
/**
* Sets the audio/video volume.Calling `media.volume()` without an argument returns the current volume
* as a number in the range 0 (off) to 1 (maximum).The parameter, `val`, is optional. It's a number that sets the volume
* from 0 (off) to 1 (maximum). For example, calling `media.volume(0.5)`
* sets the volume to half of its maximum.
*
* @return current volume.
* @example <div>
* <code>
* let dragon;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Volume: V" on a gray square with media controls beneath it. The number "V" oscillates between 0 and 1 as the music plays.');
* }
*
* function draw() {
* background(200);
*
* // Produce a number between 0 and 1.
* let n = 0.5 * sin(frameCount * 0.01) + 0.5;
*
* // Use n to set the volume.
* dragon.volume(n);
*
* // Get the current volume and display it.
* let v = dragon.volume();
*
* // Round v to 1 decimal place for display.
* v = round(v, 1);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display the volume.
* text(`Volume: ${v}`, 50, 50);
* }
* </code>
* </div>
*/
function volume(val: any): number;
/**
* @param volume between 0.0 and 1.0.
*/
function volume(val: number): void;
/**
* Sets the audio/video playback speed.The parameter, `val`, is optional. It's a number that sets the playback
* speed. 1 plays the media at normal speed, 0.5 plays it at half speed, 2
* plays it at double speed, and so on. -1 plays the media at normal speed
* in reverse.Calling `media.speed()` returns the current speed as a number.Note: Not all browsers support backward playback. Even if they do,
* playback might not be smooth.
*
* @return current playback speed.
* @example <div>
* <code>
* let dragon;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Speed: S" on a gray square with media controls beneath it. The number "S" oscillates between 0 and 1 as the music plays.');
* }
*
* function draw() {
* background(200);
*
* // Produce a number between 0 and 2.
* let n = sin(frameCount * 0.01) + 1;
*
* // Use n to set the playback speed.
* dragon.speed(n);
*
* // Get the current speed and display it.
* let s = dragon.speed();
*
* // Round s to 1 decimal place for display.
* s = round(s, 1);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display the speed.
* text(`Speed: ${s}`, 50, 50);
* }
* </code>
*/
function speed(val: any): number;
/**
* @param speed multiplier for playback.
*/
function speed(val: any, speed: number): void;
/**
* Sets the media element's playback time.The parameter, `time`, is optional. It's a number that specifies the
* time, in seconds, to jump to when playback begins.Calling `media.time()` without an argument returns the number of seconds
* the audio/video has played.Note: Time resets to 0 when looping media restarts.
*
* @return current time (in seconds).
* @example <div>
* <code>
* let dragon;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Get the current playback time.
* let s = dragon.time();
*
* // Round s to 1 decimal place for display.
* s = round(s, 1);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display the playback time.
* text(`${s} seconds`, 50, 50);
* }
* </code>
* </div>
*
* <div>
* <code>
* let dragon;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* // Jump to 2 seconds to start.
* dragon.time(2);
*
* describe('The text "S seconds" on a gray square with media controls beneath it. The number "S" increases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Get the current playback time.
* let s = dragon.time();
*
* // Round s to 1 decimal place for display.
* s = round(s, 1);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display the playback time.
* text(`${s} seconds`, 50, 50);
* }
* </code>
* </div>
*/
function time(val: any): number;
/**
* @param time to jump to (in seconds).
*/
function time(val: any, time: number): void;
/**
* Returns the audio/video's duration in seconds.
*
* @return duration (in seconds).
* @example <div>
* <code>
* let dragon;
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "S seconds left" on a gray square with media controls beneath it. The number "S" decreases as the song plays.');
* }
*
* function draw() {
* background(200);
*
* // Calculate the time remaining.
* let s = dragon.duration() - dragon.time();
*
* // Round s to 1 decimal place for display.
* s = round(s, 1);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display the time remaining.
* text(`${s} seconds left`, 50, 50);
* }
* </code>
* </div>
*/
function duration(): number;
/**
* Calls a function when the audio/video reaches the end of its playback.The element is passed as an argument to the callback function.Note: The function won't be called if the media is looping.
*
* @param function to call when playback ends.
* The `p5.MediaElement` is passed as
* the argument.
* @example <div>
* <code>
* let beat;
* let isPlaying = false;
* let isDone = false;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* beat = createAudio('assets/beat.mp3');
*
* // Call handleEnd() when the beat finishes.
* beat.onended(handleEnd);
*
* describe('The text "Click to play" written in black on a gray square. A beat plays when the user clicks. The text "Done!" appears when the beat finishes playing.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
* textSize(16);
*
* // Display different messages based on playback.
* if (isDone === true) {
* text('Done!', 50, 50);
* } else if (isPlaying === false) {
* text('Click to play', 50, 50);
* } else {
* text('Playing...', 50, 50);
* }
* }
*
* // Play the beat when the user presses the mouse.
* function mousePressed() {
* if (isPlaying === false) {
* isPlaying = true;
* beat.play();
* }
* }
*
* // Set isDone when playback ends.
* function handleEnd() {
* isDone = false;
* }
* </code>
* </div>
*/
function onended(callback: Function): void;
/**
* Sends the element's audio to an output.The parameter, `audioNode`, can be an `AudioNode` or an object from the
* `p5.sound` library.If no element is provided, as in `myElement.connect()`, the element
* connects to the main output. All connections are removed by the
* `.disconnect()` method.Note: This method is meant to be used with the p5.sound.js addon library.
*
* @param AudioNode from the Web Audio API,
* or an object from the p5.sound library
*/
function connect(obj: any, audioNode: AudioNode | object): void;
/**
* Disconnect all Web Audio routing, including to the main output.This is useful if you want to re-route the output through audio effects,
* for example.
*
*/
function disconnect(): void;
/**
* Show the default
* HTMLMediaElement
* controls.Note: The controls vary between web browsers.
*
* @example <div>
* <code>
* function setup() {
* createCanvas(100, 100);
*
* background('cornflowerblue');
*
* // Style the text.
* textAlign(CENTER);
* textSize(50);
*
* // Display a dragon.
* text('🐉', 50, 50);
*
* // Create a p5.MediaElement using createAudio().
* let dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('A dragon emoji, 🐉, drawn in the center of a blue square. A song plays in the background. Audio controls are displayed beneath the canvas.');
* }
* </code>
* </div>
*/
function showControls(): void;
/**
* Hide the default
* HTMLMediaElement
* controls.
*
* @example <div>
* <code>
* let dragon;
* let isHidden = false;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* dragon = createAudio('assets/lucky_dragons.mp3');
*
* // Show the default media controls.
* dragon.showControls();
*
* describe('The text "Double-click to hide controls" written in the middle of a gray square. A song plays in the background. Audio controls are displayed beneath the canvas. The controls appear/disappear when the user double-clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Style the text.
* textAlign(CENTER);
*
* // Display a different message when controls are hidden or shown.
* if (isHidden === true) {
* text('Double-click to show controls', 10, 20, 80, 80);
* } else {
* text('Double-click to hide controls', 10, 20, 80, 80);
* }
* }
*
* // Show/hide controls based on a double-click.
* function doubleClicked() {
* if (isHidden === true) {
* dragon.showControls();
* isHidden = false;
* } else {
* dragon.hideControls();
* isHidden = true;
* }
* }
* </code>
* </div>
*/
function hideControls(): void;
/**
* Schedules a function to call when the audio/video reaches a specific time
* during its playback.The first parameter, `time`, is the time, in seconds, when the function
* should run. This value is passed to `callback` as its first argument.The second parameter, `callback`, is the function to call at the specified
* cue time.The third parameter, `value`, is optional and can be any type of value.
* `value` is passed to `callback`.Calling `media.addCue()` returns an ID as a string. This is useful for
* removing the cue later.
*
* @param cue time to run the callback function.
* @param function to call at the cue time.
* @param object to pass as the argument to
* `callback`.
* @return id ID of this cue,
* useful for `media.removeCue(id)`.
* @example <div>
* <code>
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
*
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
* beat.addCue(6, changeBackground, 'lavender');
*
* describe('A red square with a beat playing in the background. Its color changes every 2 seconds while the audio plays.');
* }
*
* // Change the background color.
* function changeBackground(c) {
* background(c);
* }
* </code>
* </div>
*/
function addCue(time: number, callback: Function, val: any, value?: object): number;
/**
* Removes a callback based on its ID.
*
* @param ID of the cue, created by `media.addCue()`.
* @example <div>
* <code>
* let lavenderID;
* let isRemoved = false;
*
* function setup() {
* createCanvas(100, 100);
*
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
*
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
*
* // Record the ID of the "lavender" callback.
* lavenderID = beat.addCue(6, changeBackground, 'lavender');
*
* describe('The text "Double-click to remove lavender." written on a red square. The color changes every 2 seconds while the audio plays. The lavender option is removed when the user double-clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Display different instructions based on the available callbacks.
* if (isRemoved === false) {
* text('Double-click to remove lavender.', 10, 10, 80, 80);
* } else {
* text('No more lavender.', 10, 10, 80, 80);
* }
* }
*
* // Change the background color.
* function changeBackground(c) {
* background(c);
* }
*
* // Remove the lavender color-change cue when the user double-clicks.
* function doubleClicked() {
* if (isRemoved === false) {
* beat.removeCue(lavenderID);
* isRemoved = true;
* }
* }
* </code>
* </div>
*/
function removeCue(id: number): void;
/**
* Removes all functions scheduled with `media.addCue()`.
*
* @example <div>
* <code>
* let isChanging = true;
*
* function setup() {
* createCanvas(100, 100);
*
* background(200);
*
* // Create a p5.MediaElement using createAudio().
* let beat = createAudio('assets/beat.mp3');
*
* // Play the beat in a loop.
* beat.loop();
*
* // Schedule a few events.
* beat.addCue(0, changeBackground, 'red');
* beat.addCue(2, changeBackground, 'deeppink');
* beat.addCue(4, changeBackground, 'orchid');
* beat.addCue(6, changeBackground, 'lavender');
*
* describe('The text "Double-click to stop changing." written on a square. The color changes every 2 seconds while the audio plays. The color stops changing when the user double-clicks the square.');
* }
*
* function draw() {
* background(200);
*
* // Display different instructions based on the available callbacks.
* if (isChanging === true) {
* text('Double-click to stop changing.', 10, 10, 80, 80);
* } else {
* text('No more changes.', 10, 10, 80, 80);
* }
* }
*
* // Change the background color.
* function changeBackground(c) {
* background(c);
* }
*
* // Remove cued functions and stop changing colors when the user
* // double-clicks.
* function doubleClicked() {
* if (isChanging === true) {
* beat.clearCues();
* isChanging = false;
* }
* }
* </code>
* </div>
*/
function clearCues(): void;
/**
* VIDEO STUFF *
*
*/
function createMedia(pInst: any, type: any, src: any, callback: any): void;
}
export default function p5_MediaElement(p5: any, fn: any): void;