Merge pull request #581 from processing/p5.sound

[WIP] p5.sound
processing · Oct 10, 2024 · a61cf25 · a61cf25
2 parents 1dafaf3 + 1f98cca
commit a61cf25
Show file tree

Hide file tree

Showing 303 changed files with 27,416 additions and 40,567 deletions.
diff --git a/public/reference/data.json b/public/reference/data.json
diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -6,6 +6,7 @@ interface CodeBundle {
   htmlBody?: string;
   js?: string;
   base?: string;
+  scripts?: string[];
 }
 
 /*
@@ -41,8 +42,10 @@ canvas {
 }
 ${code.css || ""}
 </style>
+${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
+${(code.scripts?.length ?? 0) > 0 ? '' : `
 <script type="text/javascript">
   // Listen for p5.min.js text content and include in iframe's head as script
   window.addEventListener("message", event => {
@@ -57,6 +60,7 @@ ${code.css || ""}
     }
   })
 </script>
+`}
 `.replace(/\u00A0/g, " ");
 
 export interface CodeFrameProps {
@@ -67,6 +71,7 @@ export interface CodeFrameProps {
   width?: number | string;
   base?: string;
   lazyLoad?: boolean;
+  scripts?: string[];
 }
 
 /*
@@ -155,6 +160,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
+          scripts: props.scripts,
         })}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"

diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "preact/hooks";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
-import { cdnLibraryUrl } from "@/src/globals/globals";
+import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -21,6 +21,7 @@ import { Icon } from "../Icon";
  *   TODO: refactor this prop behavior
  *   allowSideBySide?: boolean
  *   fullWidth?: boolean
+ *   includeSound?: boolean
  * }
  */
 export const CodeEmbed = (props) => {
@@ -90,6 +91,7 @@ export const CodeEmbed = (props) => {
               base={props.base}
               frameRef={codeFrameRef}
               lazyLoad={props.lazyLoad}
+              scripts={props.includeSound ? [cdnSoundUrl] : []}
             />
           </div>
           <div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>

diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -116,11 +116,11 @@ export const ReferenceDirectoryWithFilter = ({
     subcat: { name: string },
     category: { name: string },
   ) => {
-    return !(!subcat.name || !category.name || subcat.name === "p5.sound");
+    return !(!subcat.name || !category.name);
   }
 
   const getSubcatHeading = (
-    subcat: { name: string },
+    subcat: { name: string; entry?: any },
     category: { name: string },
   ) => {
     if (!subcatShouldHaveHeading(subcat, category)) {
@@ -129,10 +129,10 @@ export const ReferenceDirectoryWithFilter = ({
 
     return (
       <>
-        {subcat.name.includes("p5.") ? (
+        {subcat.entry ? (
           <a
             id={subcat.name}
-            href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
+            href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}/`}
           >
             <h3 className="m-0 py-gutter-md">{subcat.name}</h3>
           </a>

diff --git a/src/content/pages/en/p5-sound-reference.mdx b/src/content/pages/en/p5-sound-reference.mdx
@@ -0,0 +1,5 @@
+---
+title: p5.sound Reference
+---
+
+Looking for the main p5.js reference? Go to <a href="/reference/">the reference</a>!
diff --git a/src/content/pages/en/reference.mdx b/src/content/pages/en/reference.mdx
@@ -2,4 +2,4 @@
 title: Reference
 ---
 
-Looking for p5.sound? Go to the <a href="https://archive.p5js.org/reference/#/libraries/p5.sound">p5.sound reference</a>!
+Looking for p5.sound? Go to the <a href="/reference/p5.sound/">p5.sound reference</a>!
diff --git a/src/content/reference/config.ts b/src/content/reference/config.ts
@@ -32,7 +32,7 @@ const paramSchema = z.object({
 
 const returnSchema = z.object({
   description: z.string(),
-  type: z.string(),
+  type: z.string().optional(),
 });
 
 const exampleSchema = z.string();

diff --git a/src/content/reference/en/p5.Amplitude/getLevel.mdx b/src/content/reference/en/p5.Amplitude/getLevel.mdx
@@ -2,54 +2,14 @@
 title: getLevel
 module: p5.sound
 submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Returns a single Amplitude reading at the moment it is called.
-  For continuous readings, run in the draw loop.</p>
-line: 3209
+file: src/Amplitude.js
+description: Get the current amplitude value of a sound.
+line: 62
 isConstructor: false
 itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function preload(){
-      sound = loadSound('/assets/beat.mp3');
-    }
-
-    function setup() {
-      let cnv = createCanvas(100, 100);
-      cnv.mouseClicked(toggleSound);
-      amplitude = new p5.Amplitude();
-    }
-
-    function draw() {
-      background(220, 150);
-      textAlign(CENTER);
-      text('tap to play', width/2, 20);
-
-      let level = amplitude.getLevel();
-      let size = map(level, 0, 1, 0, 200);
-      ellipse(width/2, height/2, size, size);
-    }
-
-    function toggleSound(){
-      if (sound.isPlaying()) {
-        sound.stop();
-      } else {
-        sound.play();
-      }
-    }
-    </code></div>
 class: p5.Amplitude
-params:
-  - name: channel
-    description: |
-      <p>Optionally return only channel 0 (left) or 1 (right)</p>
-    type: Number
-    optional: true
 return:
-  description: Amplitude as a number between 0.0 and 1.0
+  description: Amplitude level (volume) of a sound.
   type: Number
 chainable: false
 ---

diff --git a/src/content/reference/en/p5.Amplitude/setInput.mdx b/src/content/reference/en/p5.Amplitude/setInput.mdx
@@ -2,63 +2,16 @@
 title: setInput
 module: p5.sound
 submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Connects to the p5sound instance (main output) by default.
-  Optionally, you can pass in a specific source (i.e. a soundfile).</p>
-line: 3117
+file: src/Amplitude.js
+description: Connect an audio source to the amplitude object.
+line: 52
 isConstructor: false
 itemtype: method
-example:
-  - |-
-
-    <div><code>
-    function preload(){
-      sound1 = loadSound('/assets/beat.mp3');
-      sound2 = loadSound('/assets/drum.mp3');
-    }
-    function setup(){
-      cnv = createCanvas(100, 100);
-      cnv.mouseClicked(toggleSound);
-
-      amplitude = new p5.Amplitude();
-      amplitude.setInput(sound2);
-    }
-
-    function draw() {
-      background(220);
-      text('tap to play', 20, 20);
-
-      let level = amplitude.getLevel();
-      let size = map(level, 0, 1, 0, 200);
-      ellipse(width/2, height/2, size, size);
-    }
-
-    function toggleSound(){
-      if (sound1.isPlaying() && sound2.isPlaying()) {
-        sound1.stop();
-        sound2.stop();
-      } else {
-        sound1.play();
-        sound2.play();
-      }
-    }
-    </code></div>
 class: p5.Amplitude
 params:
-  - name: snd
-    description: |
-      <p>set the sound source
-                                           (optional, defaults to
-                                           main output)</p>
-    type: SoundObject|undefined
-    optional: true
-  - name: smoothing
-    description: |
-      <p>a range between 0.0 and 1.0
-                                            to smooth amplitude readings</p>
-    type: Number|undefined
-    optional: true
+  - name: input
+    description: '- An object that has audio output.'
+    type: Object
 chainable: false
 ---
 

diff --git a/src/content/reference/en/p5.Amplitude/smooth.mdx b/src/content/reference/en/p5.Amplitude/smooth.mdx
diff --git a/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx b/src/content/reference/en/p5.Amplitude/toggleNormalize.mdx
diff --git a/src/content/reference/en/p5.AudioIn/amp.mdx b/src/content/reference/en/p5.AudioIn/amp.mdx
@@ -2,23 +2,16 @@
 title: amp
 module: p5.sound
 submodule: p5.sound
-file: lib/addons/p5.sound.js
-description: |
-  <p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>
-line: 6257
+file: src/AudioIn.js
+description: Set amplitude (volume) of a mic input between 0 and 1.0.
+line: 82
 isConstructor: false
 itemtype: method
 class: p5.AudioIn
 params:
-  - name: vol
-    description: |
-      <p>between 0 and 1.0</p>
+  - name: amplitudeAmount
+    description: An amplitude value between 0 and 1.
     type: Number
-  - name: time
-    description: |
-      <p>ramp time (optional)</p>
-    type: Number
-    optional: true
 chainable: false
 ---
 

diff --git a/src/content/reference/en/p5.AudioIn/amplitude.mdx b/src/content/reference/en/p5.AudioIn/amplitude.mdx
diff --git a/src/content/reference/en/p5.AudioIn/connect.mdx b/src/content/reference/en/p5.AudioIn/connect.mdx
diff --git a/src/content/reference/en/p5.AudioIn/currentSource.mdx b/src/content/reference/en/p5.AudioIn/currentSource.mdx