p5.js createAudio()用法及代碼示例

createAudio()函數用於在DOM中創建音頻元素。音頻被創建為p5.MediaElement，它具有控製媒體及其播放的方法。

用法:

createAudio(src, callback)

參數：該函數接受上述和以下所述的兩個參數：

src:它是指定音頻文件路徑的字符串或字符串數組。字符串數組可用於指定多個路徑以支持各種瀏覽器。
callback:這是一個回調函數，將在觸發“ 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

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | createAudio() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。