📜  p5.js | createAudio()函数

📅  最后修改于: 2022-05-13 01:56:44.078000             🧑  作者: Mango

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