Skip to content

Commit

Permalink
Merge pull request #1 from IADT-projects/keyboard_logic_rework
Browse files Browse the repository at this point in the history 
Keyboard logic rework
  • Loading branch information
@Mangoshi
Mangoshi committed Apr 21, 2023
2 parents f0c89e4 + d6f056a commit 7a4f7d3
Show file tree
Hide file tree
Showing 3 changed files with 3,106 additions and 517 deletions.
171 changes: 144 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
sliderHeight:70,
};
</script>
<script src="https://g200kg.github.io/webaudio-controls/webaudio-controls.js"></script>
<script src="./webaudio-controls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" integrity="sha512-3RlxD1bW34eFKPwj9gUXEWtdSMC59QqIqHnD8O/NoTwSJhgxRizdcFVQhUMFyTp5RwLTDL0Lbcqtl8b7bFAzog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>MS24</title>
Expand Down Expand Up @@ -183,28 +183,43 @@
</div>
</div>
<div class="w-[250px] flex justify-end">
<div class="border border-gray-700 rounded-xl p-1 w-min flex flex-col">
<div class="border border-gray-600 rounded-xl p-1 w-min flex flex-col">
<div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col">
<p id="master_gain_label" class="text-center">Master</p>
<webaudio-knob
id="master_gain"
class="control masterControl self-center"
colors="#FFFFFF;#2C292D;#D9D9D9"
diameter="40"
min="0"
max="2"
value="1"
step="0.01"
></webaudio-knob>
<webaudio-param
id="master_gain_readout"
link="master_gain"
fontSize="14"
class="self-center border border-gray-500 mt-1"
></webaudio-param>
</div>
</div>
<div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col mr-1">
<p id="master_bpm_label" class="text-center">BPM</p>
<webaudio-knob
id="master_bpm"
class="control masterControl self-center"
colors="#FFFFFF;#2C292D;#D9D9D9"
diameter="40"
min="1"
max="600"
value="120"
step="1"
></webaudio-knob>
<webaudio-param
id="master_bpm_readout"
link="master_bpm"
fontSize="14"
class="self-center border border-gray-500 mt-1"
></webaudio-param>
</div>
<div class="border border-gray-500 rounded-xl p-1 w-min flex flex-col">
<p id="master_gain_label" class="text-center">Master</p>
<webaudio-knob
id="master_gain"
class="control masterControl self-center"
colors="#FFFFFF;#2C292D;#D9D9D9"
diameter="40"
min="0"
max="2"
value="1"
step="0.01"
></webaudio-knob>
<webaudio-param
id="master_gain_readout"
link="master_gain"
fontSize="14"
class="self-center border border-gray-500 mt-1"
></webaudio-param>
</div>
</div>
</div>
Expand All @@ -231,6 +246,16 @@
></webaudio-switch>
<p class="font-inika font-bold self-center">OSC A</p>
</div>
<div class="flex p-1">
<webaudio-switch
id="arp_a_switch"
class="control"
colors="#AB9DF2;#2C292D;#D9D9D9"
diameter="30"
value="0"
></webaudio-switch>
<p id="arp_a_label" class="font-inika font-bold ml-1">ARP</p>
</div>
</div>
<div class="self-center border border-gray-600 flex rounded-lg p-1">
<div class="border border-gray-500 rounded-xl py-1 w-min flex flex-col self-end mr-1 w-[50px]">
Expand Down Expand Up @@ -526,6 +551,16 @@
></webaudio-switch>
<p class="font-inika font-bold self-center">OSC B</p>
</div>
<div class="flex p-1">
<webaudio-switch
id="arp_b_switch"
class="control"
colors="#AB9DF2;#2C292D;#D9D9D9"
diameter="30"
value="0"
></webaudio-switch>
<p id="arp_b_label" class="font-inika font-bold ml-1">ARP</p>
</div>
</div>
<div class="self-center border border-gray-600 flex rounded-lg p-1">
<div class="border border-gray-500 rounded-xl py-1 w-min flex flex-col self-end mr-1 w-[50px]">
Expand Down Expand Up @@ -823,6 +858,16 @@
></webaudio-switch>
<p class="font-inika font-bold self-center">SUB OSC</p>
</div>
<div class="flex p-1">
<webaudio-switch
id="arp_c_switch"
class="control"
colors="#AB9DF2;#2C292D;#D9D9D9"
diameter="30"
value="0"
></webaudio-switch>
<p id="arp_c_label" class="font-inika font-bold ml-1">ARP</p>
</div>
</div>
<div class="self-center border border-gray-600 flex rounded-lg p-1">
<div class="border border-gray-500 rounded-xl py-1 w-min flex flex-col self-end mr-1 w-[50px]">
Expand Down Expand Up @@ -1239,7 +1284,7 @@
diameter="30"
value="0"
></webaudio-switch>
<label class="font-inika font-light self-center" for="lfo_selector">
<label class="font-inika font-bold self-center" for="lfo_selector">
LFO
&nbsp;
<select
Expand Down Expand Up @@ -1474,11 +1519,83 @@
<!-- KEYBOARD -->
<!--********************-->
<div class="flex justify-center border border-gray-700 p-1 z-10">
<div class="w-full">&nbsp;</div>
<div class="border border-gray-500 rounded-xl self-center p-2 z-10">
<div class="w-full flex justify-between z-10">
<div class="flex">
<div class="flex flex-col mr-1 z-10">
<div class="border border-gray-600 rounded-xl p-1 flex flex-col w-[90px]">
<p class="font-light self-center mb-0.5">Pattern</p>
<webaudio-slider
id="arp_pattern"
class="control mainControl4 self-center"
colors="#AB9DF2;#2C292D;#D9D9D9"
min="0"
max="8"
value="0"
direction="vert"
height="85"
conv="['up','down','upDown','downUp','alternateUp','alternateDown','random','randomOnce','randomWalk'][x]"
></webaudio-slider>
<webaudio-param
id="arp_pattern_readout"
link="arp_pattern"
class="self-center border border-violet-900 mt-1"
fontSize="14"
width="60"
></webaudio-param>
</div>
</div>
<div class="flex flex-col mr-1 z-10">
<div class="border border-gray-600 rounded-xl p-1 flex flex-col w-[90px]">
<p class="font-light self-center mb-0.5">Speed</p>
<webaudio-slider
id="arp_speed"
class="control mainControl4 self-center"
colors="#AB9DF2;#2C292D;#D9D9D9"
min="0"
max="6"
value="3"
direction="vert"
height="85"
conv="['1/1','1/2','1/4','1/8','1/16','1/32','1/64'][x]"
></webaudio-slider>
<webaudio-param
id="arp_speed_readout"
link="arp_speed"
class="self-center border border-violet-900 mt-1"
fontSize="14"
width="60"
></webaudio-param>
</div>
</div>
</div>
<div class="flex flex-col z-10">
<div class="border border-gray-600 rounded-xl p-1 flex flex-col w-[90px]">
<p class="font-light self-center mb-0.5">Octave</p>
<webaudio-slider
id="master_octave"
class="control mainControl4 self-center"
colors="#FFFFFF;#2C292D;#D9D9D9"
min="0"
max="4"
value="2"
direction="vert"
height="85"
conv="['-2','-1','0','+1','+2'][x]"
></webaudio-slider>
<webaudio-param
id="master_octave_readout"
link="master_octave"
class="self-center border border-gray-500 mt-1"
fontSize="14"
width="60"
></webaudio-param>
</div>
</div>
</div>
<div class="border border-gray-500 rounded-xl self-center p-2 mx-1 z-10">
<webaudio-keyboard
id="keyboard"
keys="49"
keys="61"
class="self-center"
></webaudio-keyboard>
</div>
Expand Down
Loading

1 comment on commit 7a4f7d3

@vercel
Copy link

@vercel vercel bot commented on 7a4f7d3 Apr 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ms24 – ./

ms24.vercel.app
ms24-git-master-iadt.vercel.app
ms24-iadt.vercel.app

Please sign in to comment.