I am trying to make use of web audio api with NexusUI JS for dial/knobs?
In chrome the dial is changing the oscillator frequency but in safari its playing i think the default 440hz.
Can someone please direct me what am I missing or doing wrong ? It seems like I am in the right direction since I am getting output in chrome as safari is super strict some basic mistake is been overlooked by me.
Reason for using nexusUI: It was the most minimalist dial/knob I found. I only need a super basic knob. Toggle switch I can easily replace with a play / pause button.
Example of what I am trying to do. (Same on codepen)
document.body.style.backgroundColor = "#2a2c2d";
var power = new Nexus.Toggle("#power", {
state: false
});
Nexus.colors.accent = "#16e1ff";
Nexus.colors.fill = "#2a2c2d";
Nexus.colors.accent = "#16e1ff";
var dial = new Nexus.Dial("#dial");
dial.value = 0;
dial.min = 20;
dial.max = 6000;
dial.on("change", function (v) {
knb1.frequency.value = v;
console.log(v);
return v;
});
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var knb1 = context.createOscillator();
var knb1Gain = context.createGain();
var breath1 = context.createOscillator();
var breathGain1 = context.createGain();
knb1.type = "sine";
knb1Gain.gain.value = 0.1 / 8;
knb1.connect(knb1Gain);
knb1Gain.connect(context.destination);
breath1.connect(breathGain1);
breath1.type = "sine";
breath1.frequency.value = 0.01;
breathGain1.gain.value = (0.2 + 0.01) / 8;
knb1.start();
context.onstatechange = function () {
console.log(context.state);
};
power.on("change", function (v) {
v ? context.resume() : context.suspend();
});<script src="https://cdn.jsdelivr.net/npm/nexusui@latest/dist/NexusUI.js"></script>
<div id="power"><div>
<div id="dial"></div>my code was wrong.
knb1.frequency.value = v; is wrong!
correct line is knb1.frequency.setValueAtTime(v, context.currentTime);
changing this line solved my issue.