ergz
/
simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

improves the voice vol + mater vol

This commit is contained in:
Emanuel Rodriguez 2023-10-13 23:31:13 -07:00
parent 2b5a0453d0
commit 7d0a80a987
3 changed files with 76 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
index.html
View File

@ -33,10 +33,10 @@
<button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice1" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>
<input id="volumevoice1" type="range" min="0" max="1" value=".3" step=".05" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<input id="volumevoice1" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
@ -45,7 +45,7 @@
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave1viz" class="canvas-container">
<canvas id ="wave1canvas"></canvas>
@ -77,28 +77,28 @@
<button id="octaveup2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice2" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>
<input id="volumevoice2" type="range" min="0" max="1" value=".3" step=".05" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<input id="volumevoice2" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice2display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="detunevoice2" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice2" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice2display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave2viz" class="canvas-container">
<canvas id ="wave2canvas"></canvas>
</div>
</div>
<button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
@ -123,44 +123,60 @@
<button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice3" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>
<input id="volumevoice3" type="range" min="0" max="1" value=".3" step=".05" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<input id="volumevoice3" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice3display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="detunevoice3" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice3" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice3display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave3viz" class="canvas-container">
<canvas id ="wave3canvas"></canvas>
</div>
</div>
<button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
</div>
<div style="padding: 5px">
<label for="mastervol" class="block text-sm font-medium text-gray-700 mb-1">Master Volume</label>
<input id="mastervol" type="range" min="0" max=".6" value=".2" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="mastervoldisplay" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div>
<label for="chordscales">Choose Scale:</label>
<select id="chordscales">
<option value="Cscale">C</option>
<option value="Dscale">D</option>
<option value="Esclae">E</option>
</select>
</div>
<div>
<form style="padding: 15px">
<fieldset>
<legend>Chords</legend>
<!-- Major Chords -->
<div>
<input type="radio" id="chordC" name="chordchoice" value="C" checked>
<label for="chordC">C</label>
@ -184,7 +200,7 @@
</div>
<div>
<!-- Minor Chords -->
<input type="radio" id="chordCm" name="chordchoice" value="Cm">
<label for="chordCm">Cm</label>
@ -207,10 +223,10 @@
<input type="radio" id="chordBm" name="chordchoice" value="Bm">
<label for="chordBm">Bm</label>
</div>
</fieldset>
</form>
</div>
</fieldset>
</form>
</div>

31
synth.js
View File

@ -1,6 +1,7 @@
let canvas;
let analyserNode;
let signalData;
let masterVolume;
function noteToHz(note) {
switch (note) {
@ -116,11 +117,12 @@ class Synth {
createOscillator(type = "sine", freq = 440, startOctave) {
const osc = this.audioContext.createOscillator();
const gainNode = this.audioContext.createGain();
gainNode.connect(this.gain);
gainNode.connect(this.audioContext.destination);
osc.type = type;
osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
// connect it to the gain node
this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0);
gainNode.gain.setTargetAtTime(0.05, this.audioContext.currentTime, 0);
osc.connect(this.gain);
osc.connect(gainNode);
@ -229,6 +231,8 @@ function updateFrequency(
);
}
function updateVolume(event, synth, oscIndex, masterVolume, voiceVolume) {}
function setupOctaveControls(voiceIndex, synth) {
// Get the display element for the current voice
let octaveDisplay = document.getElementById(
@ -310,17 +314,30 @@ window.onload = function () {
});
});
// master volume
const masterVolumeSlider = document.getElementById("mastervol");
const masterVolumeDisplay = document.getElementById("mastervoldisplay");
masterVolumeSlider.addEventListener("input", (event) => {
masterVolume = parseFloat(masterVolumeSlider.value);
masterVolumeDisplay.textContent = masterVolume;
synth.gain.gain.setValueAtTime(
masterVolume,
synth.audioContext.currentTime
);
});
const volumeIds = ["volumevoice1", "volumevoice2", "volumevoice3"];
volumeIds.forEach((id, index) => {
let oscillator = synth.oscillators[index];
const volSlider = document.getElementById(`${id}`);
volSlider.setAttribute("max", synth.gain.gain.value);
const volDisplay = document.getElementById(`${id}` + "display");
volSlider.addEventListener("input", (event) => {
console.log(oscillator);
let vol = parseFloat(volSlider.value);
console.log(vol);
volDisplay.textContent = vol;
volSlider.value = vol;
oscillator.gainNode.gain.setValueAtTime(
vol,
synth.audioContext.currentTime
@ -374,7 +391,13 @@ window.onload = function () {
vizObjects.forEach((viz) => {
viz.analyser.getByteTimeDomainData(viz.dataArray);
viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
viz.ctx.fillStyle = "black";
let voiceVol = synth.oscillators[viz.index].gainNode.gain.value;
if (masterVolume + voiceVol > 1) {
viz.ctx.fillStyle = "#ff5d52";
} else {
viz.ctx.fillStyle = "black";
}
viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
viz.ctx.lineWidth = 2;
viz.ctx.strokeStyle = "rgb(0, 200, 100)";

5
test.c Normal file
View File

@ -0,0 +1,5 @@
int main() {
int x;
int xxxx;
const int y;
}