Skip to content

Commit a61cf25

Browse files
QianqianyeQianqianye
authored
Merge pull request #581 from processing/p5.sound
[WIP] p5.sound
2 parents 1dafaf3 + 1f98cca commit a61cf25

File tree

303 files changed

+27416
-40567
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

303 files changed

+27416
-40567
lines changed

‎public/reference/data.json

Lines changed: 25779 additions & 31119 deletions
Large diffs are not rendered by default.

‎src/components/CodeEmbed/frame.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ interface CodeBundle {
66
htmlBody?: string;
77
js?: string;
88
base?: string;
9+
scripts?: string[];
910
}
1011

1112
/*
@@ -41,8 +42,10 @@ canvas {
4142
}
4243
${code.css || ""}
4344
</style>
45+
${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
4446
<body>${code.htmlBody || ""}</body>
4547
<script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
48+
${(code.scripts?.length ?? 0) > 0 ? '' : `
4649
<script type="text/javascript">
4750
// Listen for p5.min.js text content and include in iframe's head as script
4851
window.addEventListener("message", event => {
@@ -57,6 +60,7 @@ ${code.css || ""}
5760
}
5861
})
5962
</script>
63+
`}
6064
`.replace(/\u00A0/g, " ");
6165

6266
export interface CodeFrameProps {
@@ -67,6 +71,7 @@ export interface CodeFrameProps {
6771
width?: number | string;
6872
base?: string;
6973
lazyLoad?: boolean;
74+
scripts?: string[];
7075
}
7176

7277
/*
@@ -155,6 +160,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
155160
css: props.cssCode,
156161
htmlBody: props.htmlBodyCode,
157162
base: props.base,
163+
scripts: props.scripts,
158164
})}
159165
sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
160166
aria-label="Code Preview"

‎src/components/CodeEmbed/index.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect, useRef } from "preact/hooks";
22
import CodeMirror, { EditorView } from "@uiw/react-codemirror";
33
import { javascript } from "@codemirror/lang-javascript";
4-
import { cdnLibraryUrl } from "@/src/globals/globals";
4+
import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
55

66
import { CodeFrame } from "./frame";
77
import { CopyCodeButton } from "../CopyCodeButton";
@@ -21,6 +21,7 @@ import { Icon } from "../Icon";
2121
* TODO: refactor this prop behavior
2222
* allowSideBySide?: boolean
2323
* fullWidth?: boolean
24+
* includeSound?: boolean
2425
* }
2526
*/
2627
export const CodeEmbed = (props) => {
@@ -90,6 +91,7 @@ export const CodeEmbed = (props) => {
9091
base={props.base}
9192
frameRef={codeFrameRef}
9293
lazyLoad={props.lazyLoad}
94+
scripts={props.includeSound ? [cdnSoundUrl] : []}
9395
/>
9496
</div>
9597
<div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>

‎src/components/ReferenceDirectoryWithFilter/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,11 @@ export const ReferenceDirectoryWithFilter = ({
116116
subcat: { name: string },
117117
category: { name: string },
118118
) => {
119-
return !(!subcat.name || !category.name || subcat.name === "p5.sound");
119+
return !(!subcat.name || !category.name);
120120
}
121121

122122
const getSubcatHeading = (
123-
subcat: { name: string },
123+
subcat: { name: string; entry?: any },
124124
category: { name: string },
125125
) => {
126126
if (!subcatShouldHaveHeading(subcat, category)) {
@@ -129,10 +129,10 @@ export const ReferenceDirectoryWithFilter = ({
129129

130130
return (
131131
<>
132-
{subcat.name.includes("p5.") ? (
132+
{subcat.entry ? (
133133
<a
134134
id={subcat.name}
135-
href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
135+
href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}/`}
136136
>
137137
<h3 className="m-0 py-gutter-md">{subcat.name}</h3>
138138
</a>

‎src/content/pages/en/p5-sound-reference.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: p5.sound Reference
3+
---
4+
5+
Looking for the main p5.js reference? Go to <a href="/reference/">the reference</a>!

‎src/content/pages/en/reference.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
title: Reference
33
---
44

5-
Looking for p5.sound? Go to the <a href="https://archive.p5js.org/reference/#/libraries/p5.sound">p5.sound reference</a>!
5+
Looking for p5.sound? Go to the <a href="/reference/p5.sound/">p5.sound reference</a>!

‎src/content/reference/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const paramSchema = z.object({
3232

3333
const returnSchema = z.object({
3434
description: z.string(),
35-
type: z.string(),
35+
type: z.string().optional(),
3636
});
3737

3838
const exampleSchema = z.string();

‎src/content/reference/en/p5.Amplitude/getLevel.mdx

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,14 @@
22
title: getLevel
33
module: p5.sound
44
submodule: p5.sound
5-
file: lib/addons/p5.sound.js
6-
description: |
7-
<p>Returns a single Amplitude reading at the moment it is called.
8-
For continuous readings, run in the draw loop.</p>
9-
line: 3209
5+
file: src/Amplitude.js
6+
description: Get the current amplitude value of a sound.
7+
line: 62
108
isConstructor: false
119
itemtype: method
12-
example:
13-
- |-
14-
15-
<div><code>
16-
function preload(){
17-
sound = loadSound('/assets/beat.mp3');
18-
}
19-
20-
function setup() {
21-
let cnv = createCanvas(100, 100);
22-
cnv.mouseClicked(toggleSound);
23-
amplitude = new p5.Amplitude();
24-
}
25-
26-
function draw() {
27-
background(220, 150);
28-
textAlign(CENTER);
29-
text('tap to play', width/2, 20);
30-
31-
let level = amplitude.getLevel();
32-
let size = map(level, 0, 1, 0, 200);
33-
ellipse(width/2, height/2, size, size);
34-
}
35-
36-
function toggleSound(){
37-
if (sound.isPlaying()) {
38-
sound.stop();
39-
} else {
40-
sound.play();
41-
}
42-
}
43-
</code></div>
4410
class: p5.Amplitude
45-
params:
46-
- name: channel
47-
description: |
48-
<p>Optionally return only channel 0 (left) or 1 (right)</p>
49-
type: Number
50-
optional: true
5111
return:
52-
description: Amplitude as a number between 0.0 and 1.0
12+
description: Amplitude level (volume) of a sound.
5313
type: Number
5414
chainable: false
5515
---

‎src/content/reference/en/p5.Amplitude/setInput.mdx

Lines changed: 6 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,16 @@
22
title: setInput
33
module: p5.sound
44
submodule: p5.sound
5-
file: lib/addons/p5.sound.js
6-
description: |
7-
<p>Connects to the p5sound instance (main output) by default.
8-
Optionally, you can pass in a specific source (i.e. a soundfile).</p>
9-
line: 3117
5+
file: src/Amplitude.js
6+
description: Connect an audio source to the amplitude object.
7+
line: 52
108
isConstructor: false
119
itemtype: method
12-
example:
13-
- |-
14-
15-
<div><code>
16-
function preload(){
17-
sound1 = loadSound('/assets/beat.mp3');
18-
sound2 = loadSound('/assets/drum.mp3');
19-
}
20-
function setup(){
21-
cnv = createCanvas(100, 100);
22-
cnv.mouseClicked(toggleSound);
23-
24-
amplitude = new p5.Amplitude();
25-
amplitude.setInput(sound2);
26-
}
27-
28-
function draw() {
29-
background(220);
30-
text('tap to play', 20, 20);
31-
32-
let level = amplitude.getLevel();
33-
let size = map(level, 0, 1, 0, 200);
34-
ellipse(width/2, height/2, size, size);
35-
}
36-
37-
function toggleSound(){
38-
if (sound1.isPlaying() && sound2.isPlaying()) {
39-
sound1.stop();
40-
sound2.stop();
41-
} else {
42-
sound1.play();
43-
sound2.play();
44-
}
45-
}
46-
</code></div>
4710
class: p5.Amplitude
4811
params:
49-
- name: snd
50-
description: |
51-
<p>set the sound source
52-
(optional, defaults to
53-
main output)</p>
54-
type: SoundObject|undefined
55-
optional: true
56-
- name: smoothing
57-
description: |
58-
<p>a range between 0.0 and 1.0
59-
to smooth amplitude readings</p>
60-
type: Number|undefined
61-
optional: true
12+
- name: input
13+
description: '- An object that has audio output.'
14+
type: Object
6215
chainable: false
6316
---
6417

‎src/content/reference/en/p5.Amplitude/smooth.mdx

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)