examples and reference for this new version of p5.sound.js

[montoyamoraga]

hi!

as i am building this library, i would love to be able to test the examples and reference using the latest build of the p5.sound.js library, is there any way of being able to do that locally on my machine or on the p5js.org website? thanks :)

@limzykenneth @Qianqianye

[limzykenneth]

@montoyamoraga You may need to do this in multiple steps locally.

1. Build p5.sound.js
2. Copy p5.sound.js to a local copy of the p5.js repo lib folder
3. Run the build on the p5.js folder
4. Copy the generated data.json and data.min.json files to a local copy of the p5.js-website repo
5. Run the watch task of the p5.js-website repo

These are the general steps required, there are some details and some possible optimisation of the steps. I'm happy to go into detail if you like, just let me know.

[montoyamoraga]

hi @limzykenneth thanks so much, i got it!

sadly the references i built for some reason, when i go to localhost:9000/reference/ and then i go to p5.sound, the reference that shows up is the same as p5.js, no trace of p5.sound.js, i think my data.json and data-min.json are not building correctly, it could be something super upstream, like the name of the library on my package.json is p5sound instead of p5.sound?

i couldn't figure it out, could you help me further with this error?

[limzykenneth]

@montoyamoraga Sorry for the late reply. The reference for p5.sound is not currently listed in /reference but rather in /reference/#/libraries/p5.sound. You can also bypass copying data.json/data.min.json to the website repo and running the build there by using npm run docs:dev which will build and run a minimal version of the reference page in the p5.js repo itself. It is not full featured but can be enough for previewing examples.

[montoyamoraga]

hi @limzykenneth, thanks so much! i'm having this particular trouble and i'm stuck.

when i follow all these steps and do "npm run watch" on the p5.js-website repo, and then go to the address http://localhost:9000/reference/#/libraries/p5.sound i see the reference for p5.js, not p5.sound.js :( i attach a screenshot

i think i this has to do with the build process of the new p5.sound.js: when building the new p5.sound.js, instead of starting from the older p5.sound.js, i copied the source files from p5.js, and then deleted most of the source code, and replaced it with the files for p5.sound.js, and where it said "p5", i replaced it with "p5sound" or "p5.sound", so the build of the library works, but not the reference, so i think there must be a problem somewhere in the build, and therefore the data.json and data.min.json for the reference.

also, for me to test, and in preparation for the release of the new p5.sound.js library and the transition, could we keep the old p5.sound.js library at http://localhost:9000/reference/#/libraries/p5.sound and creating a new section on the reference for the new p5.js library, like this http://localhost:9000/reference/#/libraries/p5.sound-new so i can test the build?

thanks so much for any leads!

[limzykenneth]

Can you point me to a commit where the documentation differs between the old version and the new one?

[montoyamoraga]

hi @limzykenneth! i am working on my fork here on the main branch https://github.com/montoyamoraga/p5.sound.js and using my other branch "preparing-release" for running tests https://github.com/montoyamoraga/p5.sound.js/tree/preparing-release

the screenshot i sent you is the result of following these steps you showed me:

• Build p5.sound.js
• Copy p5.sound.js to a local copy of the p5.js repo lib folder
• Run the build on the p5.js folder
• Copy the generated data.json and data.min.json files to a local copy of the p5.js-website repo
• Run the watch task of the p5.js-website repo

does that make sense? maybe i didn't get the question!

[limzykenneth]

Ok, I think I'm seeing your problem now. I don't think the reference data.json file is being generated correctly for p5.sound. It looks like the link to p5.sound redirects to the same reference for p5 because the code that actually renders the reference for p5.sound has errored. Let me dig into it and get back to you afterwards.

[limzykenneth]

I've found the problem which is that the main p5.sound module is not declared in the inline documentation for the built file. Specifically you need to include the first block of comment in this file so that when the documentation is being built it will know the functions in p5.sound.js belongs to the p5.sound module.

Let me know if that's still not clear.

[montoyamoraga]

hi @limzykenneth i got super stuck on how to programatically build the reference page for the new p5.sound.js :(

could you help me sometime this week with that? i would love to have two links, one for the original library, and then one for the next library, so i can work in parallel and not take down the older reference for now, thanks so much for your help, i'm here very online for this!

[limzykenneth]

@montoyamoraga Having both at the same time can be a bit tricky as it means we need to somehow keep the old sound library around. Is the problem you have only about having two links to two versions of the sound library or is there also something else?

[ogbabydiesal]

I've found the problem which is that the main p5.sound module is not declared in the inline documentation for the built file. Specifically you need to include the first block of comment in this file so that when the documentation is being built it will know the functions in p5.sound.js belongs to the p5.sound module.

Let me know if that's still not clear.

Hi @limzykenneth tommy here taking over for @montoyamoraga can you elaborate on what you mean by

include the first block of comment

does this mean to delete lines 1 and 51?

[limzykenneth]

Hi @tmartinez88 the current version in this repo is correct and what I mentioned was fixed in the working fork in this commit. Essentially line 1 to 51 should be there so that the documentation system can recognize it as a module.

[ogbabydiesal]

confirming I'm still unable to see the sound reference following the following steps:

• build the p5.sound.js library
• moving and replacing the full and minified library to the p5.js repo -> lib -> addons
• building the p5.js repo and moving the data.json and data.min.json in the docs -> reference -> folder to the src -> templates -> pages -> reference folder in the p5.js-website repo
• npm run watch in the website repo

website builds but clicking the reference -> p5.sound link: http://localhost:9000/reference/#/libraries/p5.sound turns up no references

[limzykenneth]

Right I think I remember I bit better now after some testing. The problem seems to be that the built library file do not have those top level comments mentioned, the top fragment may not be included in the final build or the comment is stripped out during build, I'm not 100% sure.

-/** [p5.sound]  Version: 1.0.1 - 2021-05-25 */ 
- /**
- *  <p>p5.sound extends p5 with <a href="http://caniuse.com/audio-api"
- *  target="_blank">Web Audio</a> functionality including audio input,
- *  playback, analysis and synthesis.
- *  </p>
- *  <ul>
- *  <li><a href="#/p5.SoundFile"><b>p5.SoundFile</b></a>: Load and play sound files.</li>
- *  <li><a href="#/p5.Amplitude"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>
- *  <li><a href="#/p5.AudioIn"><b>p5.AudioIn</b></a>: Get sound from an input source, typically
- *    a computer microphone.</li>
- *  <li><a href="#/p5.FFT"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns
- *    results from the frequency spectrum or time domain (waveform).</li>
- *  <li><a href="#/p5.Oscillator"><b>p5.Oscillator</b></a>: Generate Sine,
- *    Triangle, Square and Sawtooth waveforms. Base class of
- *    <li><a href="#/p5.Noise">p5.Noise</a> and <a href="#/p5.Pulse">p5.Pulse</a>.
- *    </li>
- *  <li>
- *    <a href="#/p5.MonoSynth">p5.MonoSynth</a> and <a href="#/p5.PolySynth">p5.PolySynth</a>: Play musical notes
- *  </li>
- *  <li><a href="#/p5.Envelope"><b>p5.Envelope</b></a>: An Envelope is a series
- *    of fades over time. Often used to control an object's
- *    output gain level as an "ADSR Envelope" (Attack, Decay,
- *    Sustain, Release). Can also modulate other parameters.</li>
- *  <li><a href="#/p5.Delay"><b>p5.Delay</b></a>: A delay effect with
- *    parameters for feedback, delayTime, and lowpass filter.</li>
- *  <li><a href="#/p5.Filter"><b>p5.Filter</b></a>: Filter the frequency range of a
- *    sound.
- *  </li>
- *  <li><a href="#/p5.Reverb"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying
- *    duration and decay. </li>
- *  <b><li><a href="#/p5.Convolver">p5.Convolver</a>:</b> Extends
- *  <a href="#/p5.Reverb">p5.Reverb</a> to simulate the sound of real
- *    physical spaces through convolution.</li>
- *  <b><li><a href="#/p5.SoundRecorder">p5.SoundRecorder</a></b>: Record sound for playback
- *    / save the .wav file.
- *  <b><li><a href="#/p5.SoundLoop">p5.SoundLoop</a>, <a href="#/p5.Phrase">p5.Phrase</a></b>, <b><a href="#/p5.Part">p5.Part</a></b> and
- *  <b><a href="#/p5.Score">p5.Score</a></b>: Compose musical sequences.
- *  </li>
- *  <li><a href="#/p5/userStartAudio">userStartAudio</a>: Enable audio in a
- *  browser- and user-friendly way.</a>
- *  <p>p5.sound is on <a href="https://github.com/processing/p5.js-sound/">GitHub</a>.
- *  Download the latest version
- *  <a href="https://github.com/processing/p5.js-sound/blob/master/lib/p5.sound.js">here</a>.</p>
- *
- *  @module p5.sound
- *  @submodule p5.sound
- *  @for p5.sound
- *  @main
- */
-
-/**
- *  p5.sound 
- *  https://p5js.org/reference/#/libraries/p5.sound
- *
- *  From the Processing Foundation and contributors
- *  https://github.com/processing/p5.js-sound/graphs/contributors
- *
- *  MIT License (MIT)
- *  https://github.com/processing/p5.js-sound/blob/master/LICENSE
- *
- *  Some of the many audio libraries & resources that inspire p5.sound:
- *   - TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js
- *   - buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/
- *   - Boris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0
- *   - wavesurfer.js https://github.com/katspaugh/wavesurfer.js
- *   - Web Audio Components by Jordan Santell https://github.com/web-audio-components
- *   - Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound
- *
- *   Web Audio API: http://w3.org/TR/webaudio/
- */
-
- (function(modules) { 
-    var installedModules = {};
-    function __webpack_require__(moduleId) {
-        if(installedModules[moduleId]) {
-            return installedModules[moduleId].exports;