I would like to do some simple interactive examples of sound synthesis on a WordPress page. What are my options for relatively simple DSP task + interactive GUI? I tried to use some JS with the AudioContext API. I was copying code from this site:
https://stucklucky.medium.com/creating-an-oscillator-with-the-web-audio-api-c4159e4327fd
The JS code got caught by WordFence Security, so I was not able to run it and I am a little cautious about turning WordFence off because of past attacks on my page.
Here is a SC code example of what I would like to run on a WP page:
(
s.waitForBoot{
var num = 9;
var freq = 220;
var array = (1..9);
var amp = 1/array;
var slider = num.collect{|i|
Slider()
.value_(amp[i])
.action_{|v| amp[i] = v.(); sig.set(\amp, amp) }
};
var v = View().layout_(HLayout(
VLayout(
Button()
.string_(\Play)
.action_{|b| sig.set(\trig, 1) }
.canFocus_(false),
Button()
.string_(\Rand)
.action_{|b|
amp = { rrand(0.1, 0.8) }!num;
sig.set(\amp, amp);
slider.collect{|n, i| { n.value = amp[i] }.defer }
}
.canFocus_(false),
Button()
.string_(\Reset)
.action_{
amp = 1/array;
sig.set(\amp, amp);
slider.collect{|n, i| { n.value = amp[i] }.defer }
}
.canFocus_(false)
),
*num.collect{|i|
VLayout(
slider[i],
StaticText().string_(i + 1).align_(\center)
)
} ))
.fixedSize_(400@200)
.onClose_{ sig.free }
.front;
var sig = {
var sig = SinOsc.ar(array * freq) * \amp.kr(amp);
var env = Env.perc(0.01, 2).kr(0, \trig.tr(0));
sig.sum * env * 0.1!2
}.play;
}
)