eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Replace the JS railroad diagram with an SVG in the Audio Scope post

Browse source
This commit is contained in:
Eryn Wells 2024-10-17 08:41:04 -07:00
parent 45449c3b20
commit 9e3f7d1a69
2 changed files with 37 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

36
content/blog/2022/08/audio-scope-with-p5js/diagram.svg Normal file
View file

@ -0,0 +1,36 @@
<svg class="railroad-diagram" width="408" height="62" viewBox="0 0 408 62">
<g transform="translate(.5 .5)">
<g>
<path d="M20 21v20m10 -20v20m-10 -10h20"></path>
</g>
<path d="M40 31h10"></path>
<g>
<path d="M50 31h0"></path>
<path d="M358 31h0"></path>
<g class="terminal ">
<path d="M50 31h0"></path>
<path d="M126 31h0"></path>
<rect x="50" y="20" width="76" height="22" rx="10" ry="10"></rect>
<text x="88" y="35">&#60;audio></text>
</g>
<path d="M126 31h10"></path>
<path d="M136 31h10"></path>
<g class="terminal ">
<path d="M146 31h0"></path>
<path d="M230 31h0"></path>
<rect x="146" y="20" width="84" height="22" rx="10" ry="10"></rect>
<text x="188" y="35">Analyzer</text>
</g>
<path d="M230 31h10"></path>
<path d="M240 31h10"></path>
<g class="terminal ">
<path d="M250 31h0"></path>
<path d="M358 31h0"></path>
<rect x="250" y="20" width="108" height="22" rx="10" ry="10"></rect>
<text x="304" y="35">destination</text>
</g>
</g>
<path d="M358 31h10"></path>
<path d="M 368 31 h 20 m -10 -10 v 20 m 10 -20 v 20"></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

17
content/blog/2022/08/audio-scope-with-p5js/index.md
View file

@ -88,22 +88,7 @@ node to the input of the analyzer node, and the output of the analyzer node to
the audio context's `destination` node that routes to the computer's speakers.
Our audio processing graph looks like this:
{{< figures/railroad id="audioContextDiagram" >}}
{{< scripts/railroad >}}
return rr.Diagram(
rr.Sequence(
rr.Terminal("<audio>"),
rr.Terminal("Analyzer"),
rr.Terminal("destination")));
{{< /scripts/railroad >}}
{{< scripts/railroad narrow=1 >}}
return rr.Diagram(
rr.Stack(
rr.Terminal("<audio>"),
rr.Terminal("Analyzer"),
rr.Terminal("destination")));
{{< /scripts/railroad >}}
{{< /figures/railroad >}}
![](diagram.svg)
By itself the AudioContext doesn't actually play any audio. I'll tackle that
next.