p5.js MediaElement duration() Method

The duration() method of p5.MediaElement in p5.js library is used to return the duration of the media element on which it is called. This duration that is returned is displayed in seconds.

Syntax:

 duration()

Parameters: This function does not accept any parameters.

Return Value: This method returns a number that denotes the current time of the media element.

The following libraries are included in the “head” section of the HTML page while implementing the following examples.

<script src=”p5.Image.js”></script>
<script src=”p5.min.js”></script>

Example: The example below illustrates the duration() method in p5.js library.

Javascript

function setup() {
    createCanvas(500, 300);

    textSize(18);

    example_media =
      createVideo("sample-video.mp4");
    example_media.size(300, 150);
    example_media.position(20, 100);
    example_media.play();

    text("Click on the button to get " +
         "the duration of the media", 20, 20);

    let durationBtn =
        createButton("Get Duration");
    durationBtn.position(30, 40);
    durationBtn.mousePressed(getDuration);
}

function getDuration() {

  // Get the duration of the media element
  let media_duration =
      example_media.duration();

  text("The duration of the media is: "
       + media_duration + " seconds",
       20, 280);
}

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/duration