p5 2.0.0 → 2.0.2

package/types/dom/p5.MediaElement.d.ts

@@ -0,0 +1,1249 @@
+// 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 `&lt;audio&gt;` 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 `&lt;video&gt;` 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;