Skip to content

Add Recorder class #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions src/Recorder.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { Context as ToneContext } from "tone/build/esm/core/context/Context.js";
import { Recorder as ToneRecorder } from "tone/build/esm/component/channel/Recorder.js";

/**
* A Recorder effect to capture audio input and save as a file.
* @class Recorder
* @constructor
* @example
* <div>
* <code>
* let osc, recorder;
* let recording = false;
* let recordStartTime = 0;
* let recordDuration = 3000; // in ms
*
* function setup() {
* let cnv = createCanvas(200, 100);
* textAlign(CENTER, CENTER);
* textSize(16);
*
* osc = new p5.Oscillator('sine');
* osc.amp(0.5);
*
* recorder = new p5.Recorder();
* osc.connect(recorder);
*
* cnv.mousePressed(startRecording);
* describe('Click to record a 3-second sine wave and download it.');
* }
*
* async function startRecording() {
* if (recording) return;
* recording = true;
* recordStartTime = millis();
*
* recorder.start();
* osc.start();
*
* setTimeout(async () => {
* let audioBlob = await recorder.stop();
* recorder.download(audioBlob, 'recording.webm');
* osc.stop();
* recording = false;
* }, recordDuration);
* }
*
* function draw() {
* background(220);
*
* if (recording) {
* let remaining = Math.ceil((recordDuration - (millis() - recordStartTime)) / 1000);
* remaining = max(0, remaining);
* text(`Recording: ${remaining}`, width / 2, height / 2);
* } else {
* text('Click to record', width / 2, height / 2);
* }
* }
* </code>
* </div>
*/
class Recorder {
constructor(mimeType = 'audio/webm'){
if (!MediaRecorder.isTypeSupported(mimeType)) {
throw new Error(`MIME type "${mimeType}" is not supported by this browser.`);
}
this.recorder = new ToneRecorder({mimeType});
}

/**
* Start recording audio.
* @method start
*/
start() {
this.recorder.start();
}

/**
* Stop recording and return the audio Blob.
* @method stop
* @return {Promise<Blob>} A Promise that resolves to the recorded audio Blob.
*/
async stop() {
return await this.recorder.stop();
}

/**
* Download the recorded audio as a file.
* @method download
* @param {Blob} recording The recorded audio Blob.
* @param {String} filename The name of the downloaded file.
*/
download(recording, filename = "recording.webm") {
const url = URL.createObjectURL(recording);
const anchor = document.createElement("a");
anchor.download = filename;
anchor.href = url;
anchor.click();
}

/**
* Get the underlying node for connecting inputs.
* @method getNode
* @return {Object} The recorder node.
*/
getNode() {
return this.recorder;
}

/**
* Connect an input source to the recorder.
* @method connect
* @param {Object} source A p5.sound source (Oscillator, Soundfile, etc.).
*/
connect(source) {
if (typeof source.getNode === "function") {
source.getNode().connect(this.recorder);
} else {
source.connect(this.recorder);
}
}

disconnect() {
this.recorder.disconnect(ToneContext.destination);
}
}

export default Recorder;
4 changes: 2 additions & 2 deletions src/app.js
Original file line number Diff line number Diff line change
@@ -58,5 +58,5 @@ p5.prototype.loadSound = loadSound;
import AudioIn from './AudioIn';
p5.AudioIn = AudioIn;

//import Recorder from './Recorder';
//p5.prototype.Recorder = Recorder;
import Recorder from './Recorder';
p5.Recorder = Recorder;