p5.js | función createAudio()

La función createAudio() se usa para crear un elemento de audio en el DOM. El audio se crea como p5.MediaElement , que tiene métodos para controlar los medios y su reproducción.

Sintaxis:

createAudio(src, callback)

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

• src: es una string o una array de strings que especifica la ruta del archivo de audio. La array de strings se puede usar para especificar múltiples rutas para el soporte de varios navegadores.
• devolución de llamada: es una función de devolución de llamada que se activará cuando se active el evento ‘canplaythrough’. Este evento se activa cuando el audio ha terminado de cargarse y no requiere ningún almacenamiento en búfer adicional. Es un parámetro opcional.

Valor devuelto: Devuelve un puntero al p5.MediaElement con el audio.

Los siguientes ejemplos ilustran la función createAudio() en p5.js:

Ejemplo 1:

function setup() {
  createCanvas(300, 300);
  text("Click on the buttons below to"+ 
       "play/pause the audio", 20, 20);
   
  audioElement = createAudio("sample_audio.wav");
  audioElement.position(20, 50);
  audioElement.size(300);
   
  // Show the audio controls
  audioElement.showControls();
}

Producción:

Ejemplo 2:

function setup() {
  createCanvas(300, 300);
  text("Loading the audio...", 20, 20);
  
  audioElement = createAudio("sample_audio.mp3", afterLoad);
  audioElement.position(20, 20);
  audioElement.size(300);
  
  playBtn = createButton("Play Audio");
  playBtn.position(30, 80);
  playBtn.mouseClicked(playAudio);
  
  pauseBtn = createButton("Pause Audio");
  pauseBtn.position(150, 80);
  pauseBtn.mouseClicked(pauseAudio);
}
  
function afterLoad() {
  text("The audio has finished loading and"+
              " can now be played!", 20, 40);
}
  
function playAudio() {
  audioElement.play();
}
  
function pauseAudio() {
  audioElement.pause();
}

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/reference/#/p5/createAudio