Unable to use p5 audio library with p5 and canvas-sketch

[jobarbo]

Hi Matt, I’m currently trying to get realtime audio through p5-sound with canvas-sketch but I can’t seem to make it work. When I call for const mic = new p5.AudioIn(); It says that p5.AudioIn is not a constructor. If I add it through a require with the path, it says that p5 is undefined. I looked on the web and it seem to say that to make it work I have to add the script tag in the html but there is none in canvas-sketch file system. I was wondering if you had any tip. It does the same thing with p5.DOM. Thanks!

[jusebin]

I can't too, I spend severals hours to fix this, but nothing happen I subscribe here if someone got the solution !

[prltagustina]

Hi! this same question was raised in the creative code course, by bruno imbrizi. this is the answer:

"it is not possible to save the video with audio using the canvas-sketch --stream command.

Canvas-sketch is designed to be asynchronous, it waits for each frame to render completely before moving on to the next. Let's say you are exporting something complicated and using large dimensions. Even if it runs slowly in real time, canvas-sketch can still export a video smoothly.

When it comes to audio, it has its own timeline. It's not possible to split it into audio chunks per frame and then stitch it all together seamlessly. The best way to export a sketch with video and audio together is to run it in real time and use screen recording software."

El vie, 29 jul 2022 a las 12:26, Juru @.***>) escribió:

I can't too, I spend severals hours to fix this, but nothing happen I subscribe here if someone got the solution !

— Reply to this email directly, view it on GitHub https://github.com/mattdesl/canvas-sketch/issues/160#issuecomment-1199531311, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVTWEE37UK5S5Z2FNGBJNQ3VWPZ2VANCNFSM53TB3KRA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[cdaein]

This is somewhat hacky and not an ideal way but it works 🤷

const canvasSketch = require("canvas-sketch");
const p5 = require("p5");
window.p5 = p5;
require("p5/lib/addons/p5.sound");

const sketch = ({ p5 }) => {
  const mySynth = new p5.constructor.MonoSynth();

  p5.getAudioContext().suspend();
  p5.mousePressed = () => {
    p5.userStartAudio();
    mySynth.play();
  };

  return ({ context, width, height }) => {
    context.fillStyle = `#aaa`;
    context.fillRect(0, 0, width, height);
  };
};

const settings = {
  dimensions: [600, 600],
  p5: p5,
};

canvasSketch(sketch, settings);

If it throws an error with undefined addModule, add --https in CLI when you start the server.