How to record audio from a p5.js sketch?

Use the p5.sound recorder class to capture audio output, then save it as a file; the README highlights recording as a key feature with examples available online.

p5.sound or Web Audio API directly for music apps?

p5.sound is easier for beginners and integrates with p5.js visuals, but Web Audio API offers more control; choose based on your need for simplicity versus fine-tuning.

Can p5.sound be used with React?

It's possible but complex, as p5.sound requires a p5.js sketch context; you'd need to wrap the sketch in a React component, which can lead to integration headaches.

What happens to p5.sound after December 2023?

This version will be archived and deprecated, with a new library in development; users should migrate to the updated version for future support and features.

How to analyze audio frequencies in real-time?

Use the FFT class in p5.sound to extract frequency and amplitude data, which can drive visualizations, as shown in the audio analysis examples.

Is p5.sound good for building synthesizers?

Yes, it includes synthesis and sequencing capabilities, making it suitable for browser-based instruments, though it may lack advanced modulation options of dedicated libraries.

p5.sound

MITJavaScriptv1.0.2

A p5.js library that brings the Processing approach to Web Audio for creative coding with sound.

Visit Website GitHub

908 stars672 forks0 contributors

What is p5.sound?

p5.sound is a JavaScript library that extends p5.js with comprehensive audio capabilities, bringing the Processing approach to Web Audio. It provides tools for playback, recording, analysis, synthesis, and effects, enabling developers and artists to integrate sound into interactive web-based projects. The library simplifies complex audio programming, making it accessible for creative coding and educational purposes.

Target Audience

Creative coders, digital artists, educators, and developers using p5.js who want to incorporate audio into their interactive sketches, visualizations, or musical projects.

Value Proposition

Developers choose p5.sound for its seamless integration with p5.js, intuitive API that mirrors Processing's design philosophy, and comprehensive feature set covering the entire Web Audio spectrum. It uniquely bridges creative coding and audio programming with an accessible, well-documented approach.

Overview

p5.sound brings the Processing approach to Web Audio and p5.js. Demos:

Use Cases

Best For

Creating interactive audio-visual art installations in the browser

Related Projects

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

Teaching sound programming and digital music concepts in educational settings

Building browser-based musical instruments or sequencers

Developing sound-reactive visualizations and generative art

Prototyping audio applications with minimal setup and code

Adding sound effects and background music to p5.js games or animations

Not Ideal For

Production applications requiring a stable, actively maintained audio library without imminent deprecation
Developers needing fine-grained, low-level control over Web Audio API nodes and custom audio routing
Projects built on web frameworks like React or Vue that don't integrate with p5.js sketches
Professional music production apps demanding advanced features like multi-track editing or VST support

Pros & Cons

Pros

Seamless p5.js Integration

Designed specifically for p5.js, it allows audio to be added to sketches with minimal setup, as emphasized in the README's goal of extending p5.js creatively.

Comprehensive Audio Toolkit

Covers playback, recording, synthesis, analysis, and effects in one library, providing a full suite for creative audio projects, as listed in the key features.

Educational and Accessible Design

Follows the Processing philosophy with intuitive APIs and extensive examples, such as tutorials by Dan Shiffman, making it ideal for teaching and prototyping.

Built on Tone.js Modules

Leverages reliable components from Tone.js for timing and signals, ensuring robust foundation for sequencing and modulation tasks.

Cons

Impending Deprecation

The library is being sunsetted in December 2023 for a new version, creating migration challenges and uncertainty for ongoing projects, as stated in the README.

Tight p5.js Coupling

Exclusively designed for p5.js, it cannot be easily used outside this ecosystem, limiting its applicability in general web development contexts.

Performance Abstraction Overhead

As a high-level wrapper over Web Audio API, it may introduce latency or lack optimizations available with direct API usage, especially in complex audio graphs.

Documentation Fragmentation

With the new version in development, current documentation might become outdated, and examples are split across multiple sources, complicating learning.

Frequently Asked Questions

Home

Audio Visualization

MIDI.js

:musical_keyboard: Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

Stars3,922

Forks627

Last commit1 year ago

audiowaveform

C++ program to generate waveform data and render waveform images from audio files

Stars2,142

Forks251

Last commit9 months ago

Meyda

Audio feature extraction for JavaScript.

Stars1,639

Forks106

Last commit1 year ago

Beep.js

Beep is a JavaScript toolkit for building browser-based synthesizers.

Stars1,367

Forks84

Last commit11 years ago

Audio Visualization5.0k