p5.js | createAudio()函数

createAudio()函数用于在 DOM 中创建音频元素。音频被创建为p5.MediaElement ，它具有控制媒体及其播放的方法。

句法：

createAudio(src, callback)

参数：此函数接受上面提到的两个参数，如下所述：

• src：指定音频文件路径的字符串或字符串数组。字符串数组可用于指定多个路径，以支持各种浏览器。
• 回调：这是一个回调函数，会在“canplaythrough”事件触发时触发。当音频完成加载并且不需要任何额外的缓冲时会触发此事件。它是一个可选参数。

返回值：它返回指向带有音频的p5.MediaElement的指针。

以下示例说明了 p5.js 中的createAudio()函数：

示例 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();
}

输出：

示例 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();
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/createAudio