[Feature Request] P5 Sound

[somecho]

Hi! I see that you are working on p5 1.0 at the moment so I don't want to bother you with this issue. It seems that P5 sound is not in the package. It would be great to able to call p5 sound methods directly from vue-p5.

[Kinrany]

Hi! I'm not exactly working on 1.0 right now, haha. I totally should, but there haven't been any really important changes there AFAIK.

How would you expect p5 sound to be used from vue-p5? I have never used it for my own projects, so I'm not sure what would the most obvious interface look like.

[somecho]

I see! I'm not really sure to be honest. Before 1.0 came out, what I did was import both vue-p5 and p5 to my project. Then I can call the sound library from within the sketch, since many p5 methods start with 'p5' like p5.Oscillator().

After 1.0 came out, I could not call the p5 sound methods anymore, for some reason. There was an error which looked like 'P5 is not defined'. I'm not sure if this is a problem with the package, with Vue or with Vue-p5 (sorry, I'm not a professional developer, so it's hard for me to tell). But all I know was downgrading to p5 0.10 let me call the methods again.

I'm not sure what the internals of the p5 sound library looks like, but I think it is a wrapper around the Webaudio API. This small issue I mentioned just makes me wish I could call the methods included in the sound library without having to type 'p5'. Instead of p5.Oscillator()' , justoscillator()`.

[Kinrany]

I just published a new version under the next tag. It has p5 1.0 and also exports the p5 object as VueP5.p5 so that you don't have to import it twice.

I suspect that the problem was caused by two different versions of p5 and by p5.Sound monkey-patching the wrong one of them. Using only one version should prevent that.

Please let me know whether that helps or not! And feel free to share the thing you're making whenever it's ready :)

[somecho]

I tested vue-p5 0.9.0-rc2 and it still throws the same error I've been encountering. Here is the dependency list from the project:

  "dependencies": {
    "core-js": "^3.6.4",
    "p5": "^1.0.0",
    "vue": "^2.6.11",
    "vue-p5": "^0.9.0-rc2"
  },

The template never changes and is just a simple one for debugging:

<div id="app">
    <vue-p5 @setup="setup" ></vue-p5>
</div>

The script looks like this:

import VueP5 from "vue-p5";
import p5 from "p5"
import  "p5/lib/addons/p5.sound";

export default {
    name: "App",
    components: {
        "vue-p5": VueP5
    },
    data: () => ({
        osc: null,
    }),
    methods: {
        setup(sketch) {
            sketch.createCanvas(200, 200);
            sketch.background(0);
            this.osc = new p5.Oscillator('Sine')
        },
    }
};

With p5 1.0.0, this throws the following error in the console: ReferenceError: p5 is not defined

With an earlier version of p5 (I previously used 0.10.2), there's no error and I can use the oscillator. You can also see that because the p5.sound library is separate, I have to import both p5 and the p5.sound library. Do you think I should open this issue at the p5.sound Github?

Anyways, I switched to using Web Audio for the project because I ended up needing the WebAudioClock. I will let you know if I make anything with Vue-p5!

[Kinrany]

Thanks for trying the new version and for the code!

I can't check right now, but I think you can remove the separate "import p5" and use "sketch" in its place.

If that doesn't work, "const p5 = VueP5.p5" should also be equivalent to the import. Although I guess it's less likely to help :0

[somecho]

Do you mean like instance mode?

[Kinrany]

Basically this:

import VueP5 from "vue-p5";
// import p5 from "p5"                                    <-- not used!
import  "p5/lib/addons/p5.sound";

export default {
    name: "App",
    components: {
        "vue-p5": VueP5
    },
    data: () => ({
        osc: null,
    }),
    methods: {
        setup(sketch) {
            sketch.createCanvas(200, 200);
            sketch.background(0);
            this.osc = new sketch.Oscillator('Sine').  //  <--- `sketch` instead of `p5`
        },
    }
};

[Kinrany]

And the other option is this.osc = new VueP5.p5.Oscillator('Sine')

[somecho]

With this

import VueP5 from "vue-p5";
import "p5/lib/addons/p5.sound";
//////
methods: {
        setup(sketch) {
            sketch.createCanvas(200, 200);
            sketch.background(0);
            this.osc = new sketch.Oscillator('Sine').  //  <--- `sketch` instead of `p5`
        },
    }

I get this error: Error in v-on handler: "TypeError: sketch.Oscillator is not a constructor

With the second option I get this error: Error in v-on handler: "TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_0___default.a.p5.Oscillator is not a constructor"

[Kinrany]

Huh, that's unfortunate. Thanks for checking though!

I wonder if p5.Sound works with p5 in instance mode at all. Doesn't seem to be documented anywhere :(

Is p5.Sound more convenient than WebAudio? If it's basically a reverse conversion from instance mode to global mode, perhaps I should just advise people to use WebAudio instead...

[somecho]

No problem! :)

I just checked and p5.sound does work in instance mode! Like so:

const s = (sketch) => {
        sketch.setup = () => {
                sketch.createCanvas(200,200)
                sketch.background(0)
                let osc = new p5.Oscillator('sine')
                osc.freq(440)
                osc.start()
        }
}
let myp5 = new p5(s)

P5.Sound is more convenient if you are used to the p5 style of programming. It's essentially just a WebAudio wrapper though. After doing my small project, I think it's a good idea to use WebAudio instead of P5.sound, since it still works well with p5 sketches anyways!

So I guess my feature request doesn't make sense after all 😅

[Kinrany]

I see, thanks for checking again :)

So I guess my feature request doesn't make sense after all 😅

It totally does! Thanks to this issue me and other people now know that WebAudio can be used directly instead of p5.Sound, and it'll be easy to find.

I'll probably have to figure out a solution to using other p5 libraries eventually (https://github.com/Kinrany/vue-p5/issues/8), but I guess I can put it on the back burner again.

I'll keep this issue open for now, since this is still not a perfect solution

[somecho]

Closing this because

1. Inactive
2. After having worked on creating libraries using p5.sound, I found that it is hard if not downright impractical to wrap p5.sound due to the way it depends on a global p5 object to be created first.
3. As of 2023, p5 has a new sound fellow to work on the sound library. Maybe it will be more doable in the future.
4. As mentioned above, it's easier as of now to just use webaudio or other libs like tone.js

[Kinrany]

Thanks for the update!