如何在實例模式下使用 p5.js 聲音

Question

我正在嘗試在同一頁面上創建一個包含多個 p5 畫布的網站，因此經過大量研究，我得出的結論是，最合適的方法是在 p5 上使用實例模式。 我花了一整天的時間試圖理解實例模式，我什至在網上找到了一個可以為我轉換它的轉換器，但我試圖自己做這一切，只是為了檢查錯誤。 問題是我找不到使用實例模式在我的草圖中使用聲音的方法。 我擁有的代碼要復雜得多，但即使只是嘗試基本的它仍然無法正常工作。

 var s = function(p) { let song; p.preload = function() { p.song = load('thunder.mp3') } p.setup = function() { p.createCanvas(720, 200); p.background(255, 0, 0); p.song.loop(); }; }; var myp5 = new p5(s, 'c1');

 html, body { margin: 0; padding: 0; } canvas { display: block; }

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script> <script language="javascript" type="text/javascript" src="sketch.js"></script> <style> body {padding: 0; margin: 0; } <meta charset="UTF-8"> </style> </head> <body> <div id="c1"></div> <br> <div id="c2"></div> </body> </html>

你可以在這里測試它： https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt

此代碼在全局模式下運行良好：

 let song; function preload() { song = loadSound('thunder.mp3'); } function setup() { createCanvas(720, 200); background(255,0,0); song.loop(); }

 html, body { margin: 0; padding: 0; } canvas { display: block; }

 <:DOCTYPE html> <html lang="en"> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>

你可以在這里測試https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp

它顯示此錯誤：“未捕獲的 ReferenceError：未定義負載（：第 9 行）”我做錯了什么？ 提前致謝！

Answer 1

請嘗試發布您正在運行的確切代碼。 您的問題包含與您在評論中發布的鏈接不同的代碼。

但退后一步，這是我對實例模式和庫的看法：

實例模式意味着屬於草圖的變量和函數現在通過變量引用，在您的情況下為p變量。
但是屬於庫的變量和函數仍然被直接引用，即在“全局模式”中。

換句話說，您不想使用實例模式引用load() （或者它是loadSound() ？） function 。 您仍然應該直接引用 function，因為它來自庫而不是特定草圖。

如何在實例模式下使用 p5.js 聲音

問題描述

1 個解決方案

解決方案1
1 已采納 2020-12-06 21:14:33

如何在實例模式下使用 p5.js 聲音

問題描述

1 個解決方案

解決方案1 1 已采納 2020-12-06 21:14:33

解決方案1
1 已采納 2020-12-06 21:14:33