Add Recorder Class

[ogbabydiesal]

from Tone.js Recorder class

https://tonejs.github.io/docs/15.0.4/classes/Recorder.html

[lvdopqt]

Hi! 👋
I've started working on this feature by wrapping Tone.js's Recorder. You can check out the initial implementation here:
🔗 lvdopqt@e7c0ebe

It currently records in audio/webm by default. Some browsers also support audio/ogg, but unfortunately more standardized formats like WAV or MP3 aren’t supported out of the box by MediaRecorder.

Here’s a working example sketch that records and downloads audio from a p5 oscillator:
🎛️ Example Sketch

Would love feedback or thoughts on direction, especially if there's interest in fallback formats or alternative export options!

[lvdopqt]

I've moved the Recorder from the prototype to the root p5, added it to the example, and opened a PR here

[ogbabydiesal]

hey just checked out your branch i think it's great but would be awesome to support wav and mp3, are those tricky to add? I tried exporting both by changing the filetype but doesn't seem to be supported yet. want to submit with those and i'll merge?

[lvdopqt]

@ogbabydiesal I'll search for that! As Tone.js implementation just wraps around the MediaRecorder it just supports natively audio/webm and audio/ogg. I would need to use external libs like https://github.com/ffmpegwasm/ffmpeg.wasm, or specific for wav and mp3 format (wav-encoder , lamejs) or impelemt those methods based on those stablished ones.

[lvdopqt]

The wav-audio-encoder-js library looks pretty straightforward to work with source, and it's licensed under the MIT License which is permissive and simple to integrate.

On the other hand, lamejs (for MP3 encoding) has a more explicit licensing requirement:

1. Link to LAME as a separate jar (lame.min.js or lame.all.js)
2. Fully acknowledge the use of LAME and link to their website (lame.sourceforge.net)
3. Any modifications to LAME must be released back under LGPL

Given this, I think it makes sense for us to implement WAV support directly within the Recorder class, since it's a lossless format and easier to manage license-wise. Users who need compressed formats like MP3 can handle conversion on their end using the tools of their choice.

[ogbabydiesal]

let's go with wav for right now!

[ksen0]

Hi @ogbabydiesal @lvdopqt ! Chiming in on how a more integrated audio/video export could work.This is pretty separate from (/additional to) the p5.Recorder implementation that mirrors tone.js use, which makes total sense. I think since you're thinking about the recording here, I wanted to share a few possible additive future possibilities for your consideration!

In p5.js, the analogs of save(), saveCanvas, and saveFrames exist, and can be expanded to. saveSound API could follow a similar pattern to saveFrames: filename, filetype, starting point, ending point. In saveFrames, the start/end is frames. Not sure how much that makes sense for sound. May be more relevant to look at the saveGif API: filename, duration in second, delay from start. Alternatively, save(something) could be introduced (for example, something.start() can also be saved with save(something) and/or something.save): see also save reference.

I think the above are ideas about API and usage, not implementation; underneath, it would be using Recorder class. Whatever version of save (probably not all of the above, for maintainability) could wrap the async call, and require the creation of the recorder. Or maybe the recorder could be implicitly created - though that may make possibility for confusion much worse.

Lastly, there is a community add-on library, p5.capture. Here you can see the UI for recording and the usage. It is a widely used library and seems to work out of the box with both 1.x and 2.x, and because it has many dependencies to support different formats, it would be a bigger discussion if to include it in the core. But even as a separate add-on, it's popular, and I would be happy to potentially discuss ways that the sound recording could be somehow made possible to that add-on from the sound library (sound capture is out of scope for the way that video capture works) so that from the end-user perspective, if they have both sound addon and p5 capture addon, the whole thing works as expected (saves both sound and video). That might be very difficult to achieve and likely requires overloading something from p5.capture in p5.sound itself, but if possible, would be really beginner-friendly.

I think providing multiple different ways to do something like export can lead to a lot of confusion, and I don't think these should be added without consideration, but I wanted to share the research on what could be a way to do export/saving of sound in a way that looks and feels more like p5.js. Looking forward to hear what you think!