Importing the p5js sound library

Community Help
1

Hello Observable Community,

I use both the p5js online editor and Observable in my teaching (though I’m stronger at the former than the latter). I wanted to show the students how one of my examples—a simple sound visualizer—built in the p5js online editor could translate to Observable.

Following Tom MacWright’s p5js notebook, I have basic p5js examples working. However, I can’t seem to figure out how to import the p5js sound library. See link: Untitled / Jon E. Froehlich | Observable

I’ve tried both of these approaches but neither work:

image
image1226×229 20.1 KB

Thanks for the help

Jon

PS Observable forums said my post is limited to only two links, so I had to remove a bit more context for this post.

2

I noticed some notebooks have p5js sound working (e.g., like this one but they’re not using Tom’s same p5js approach.

I also consulted Observable’s “How to require stubborn modules” but I’m such a n00b, I still can’t figure out what to do!

Thanks for the help,

3

the Module Require Debugger is great for this kind of thing. it offered up:

require('p5@1.6.0/lib/p5.min.js')

among a few other options. does that load for you?

4

Nice! I did not know about that tool before! However, I need to use p5.sound.min.js. I can load the primary p5.mins.js library just fine.

See: UNPKG - p5

I tried require('p5@1.6.0/lib/addons/p5.sound.min.js') and it failed.

Jon

5

ah, i see! yes, that is a bit tougher. :slight_smile: i found this notebook by @keystroke, which loads P5 then loads sound:

p5 = require("p5").then(async (p5) => {
  // newer versions of p5 sound don't work with es6 modules
  await require("p5@0.9.0/lib/addons/p5.sound.min.js");
  return p5;
})

give that a go, and let me know. :slight_smile:

1 Like
6

Thanks so much for the help. And I’m sorry for being so slow; I regularly use p5 but am still generally learning JavaScript and Observable.

This doesn’t work:

image
image948×269 22.9 KB

My notebook is here. It is built off the official Observable p5js template.

7

oh no worries! :slight_smile:

so you do indeed have two p5s defined in the notebook, in addition to the require i see:

import { p5 } from "@tmcw/p5"

you would need to rename one of them, for example:

import { p5 as p5Setch } from "@tmcw/p5"

and change up the references. or:

p5WithSound = require("p5").then(async (p5) => {
  // newer versions of p5 sound don't work with es6 modules
  await require("p5@0.9.0/lib/addons/p5.sound.min.js");
  return p5;
})

also, it may make sense to figure out if you need both of these, but let’s see if we can get em loaded for starters. :slight_smile:

1 Like
8

Woohoo, it’s working!

Any thoughts on how to consolidate? I’d ideally like to use the official Observable p5js template vs. Bryant Richardson’s approach, which feels more complicated.

Jon

PS Observable limits each of my posts to only two links, so will link to my notebook again in the response.

9

Here’s the notebook where the p5js sound stuff is working: Untitled / Jon E. Froehlich | Observable

But it has those two p5 imports as you rightly note… would be good to simplify this further.

1 Like
10

i tried a few things, with no luck. it looks like this comment speaks truth:

// newer versions of p5 sound don't work with es6 modules

so i think this might be an issue to raise in P5 side. :\

11

Gotcha. Thanks. I really appreciate your time and help. I’ll keep digging but will focus on other activities for the students that are more straightforward for now.

Truly grateful!

Jon

12

Hey @trebor and @jonfroehlich thanks for linking me into this thread! As you found I have made a few notebooks and variations on using p5 and the p5 sound extension in the context of observablehq.

The latest version you’ve linked is indeed a bit more complex, as I use mutable cells to break apart the one-way data flow in observable notebooks a bit to help debug what is going on along the way (as you can inspect the state variables instead of trying to console log them).

You can look at this older sound visualizer I made which is a little simpler in that it sticks closer to the p5 instance mode approach with one-way data flow, if that is easier to follow:

The newer one you linked to has a bit of a better approach for the actual sound visualization, as I’ve since discovered the use of Mel and bark scaling and a few other things I’d like to mess around with. The problem with my original approach was with too many “magic” numbers for tweaking the visualization and scaling, and I made several other variations as well that are since deleted.

I have also messed around with a few different approaches for using p5 in a notebook. The current approach is the best outside of perhaps using “import with” syntax for a singleton p5 sketch that is more “observablehq-ified” but it can be hard to follow. If you’re coming from the p5 world and don’t want to go all-in on observable hq then the linked visualizer above should be a little more strait forward.

As I mentioned, with the newer visualizer I’m using some mutable cells for the my state (which sort of act as global variables) which enable a “soft” reference to those cells, such that the cell is not added as a dependency and doesn’t re-execute when the mutable cell value changes. You can choose to make such a reference dropping the mutable keyword as desired. This helps debugging because I can inspect the the data from a specific frame while the sketch is running and that is “frozen in time” to have the state “unrolled” in that way. It also allows me to add more “observablehq idiomatic” interactions over time, though they don’t really like mutable cell feature lol.

Newer visualizer:

@trebor @jonfroehlich would be great to chat more about the audio visualization if that’s your focus as this topic has become something of an obsession of mine :slight_smile:

13

Oh, this is really neat. Thanks @keystroke!

I also love audio visualization—in fact, I love it so much I created an assignment for my class to do it! :slight_smile:

It’s more of a hobby of mine (I’m no expert) but here’s something you might like:

Thanks again for weighing in on this thread. I’m still trying to get the hang of Observable world (p5 is my safe play space, ha!).

Jon