Método p5.MediaElement volumen()

El método volume() de p5.MediaElement en p5.js se usa para establecer o devolver el volumen actual del elemento multimedia. El volumen se puede especificar con un valor entre 0,0 y 1,0, donde 0,0 significa que no hay volumen de los medios y el valor de 1,0 significa el volumen máximo. Se puede utilizar cualquier valor intermedio para especificar el volumen necesario.

El volumen actual de los medios se puede devolver al no pasar ningún parámetro a la función.

Sintaxis:

volume( val )

Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:

• val: Es un número que especifica el volumen a configurar. Puede ser un volumen entre 0.0 y 1.0. Es un parámetro opcional.

Valor devuelto: este método devuelve un número que indica el volumen actual del elemento multimedia.

Los siguientes ejemplos ilustran el método volume() en p5.js:

Ejemplo 1: 

let currVolume = 0.5;
  
function setup() {
    createCanvas(500, 400);
    textSize(18);
  
    text("Click on the buttons to increase " +
         "or decrease the volume", 20, 20);
  
    example_media =
      createVideo("sample-video.mp4");
    example_media.size(500, 300);
    example_media.position(20, 100);
    example_media.showControls();
  
    example_media.volume(currVolume);
  
    incBtn = createButton("Increase Volume");
    incBtn.position(30, 40);
    incBtn.mousePressed(incVol);
  
    decBtn = createButton("Decrease Volume");
    decBtn.position(160, 40);
    decBtn.mousePressed(decVol);
  
    text("The video is playing at " +
         "half volume", 20, 80);
}
  
function incVol() {
  clear();
  
  if (currVolume < 0.9)
    currVolume += 0.1;
  
  // Set the new higher volume
  example_media.volume(currVolume);
  
  text("The volume has been increased",
       20, 80);
  
  text("Click on the buttons to increase " + 
       "or decrease the volume", 20, 20);
}
  
function decVol() {
  clear();
  
  if (currVolume > 0.1)
    currVolume -= 0.1;
  
  // Set the new lower volume
  example_media.volume(currVolume);
  
  text("The volume has been decreased",
       20, 80);
  
  text("Click on the buttons to increase " +
       "or decrease the volume", 20, 20);
}

Producción:

Ejemplo 2:

function setup() {
  createCanvas(500, 400);
  textSize(20);
  
  text("Move the slider to increase or " +
       "decrease the volume", 20, 20);
  
  example_media =
    createVideo("sample-video.mp4");
  example_media.size(500, 300);
  example_media.position(20, 80);
  
  example_media.showControls();
  
  volSlider =
    createSlider(0.0, 1.0, 0.5, 0.1);
  volSlider.position(20, 40);
  volSlider.input(changeVol);
}
  
function changeVol() {
  clear();
  
  let volumeVal = volSlider.value();
  
  // Set the media volume to the slider value
  example_media.volume(volumeVal);
  
  // Get the current volume
  let currVolume = example_media.volume();
  
  text("Move the slider to increase or " +
       "decrease the volume", 20, 20);
  text("Video is playing at volume: " +
       currVolume, 20, 80);
}

Producción:

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.MediaElement/volumen