more bass

docs/assets/pedalboard.js

@@ -82,18 +82,52 @@ window.setupPedalBoard = async function(guitarContext, guitarName, deviceId, use
     })
     .catch(e => onError('Failed to load reverb impulse'));
 
-  $pedalboard.innerHTML = "";
+  $pedalboard.innerHTML = `
+	<fluent-tabs activeid="wahwah">
+		<fluent-tab id="wahwah">Wah Wah</fluent-tab>
+		<fluent-tab id="compressor">Compressor</fluent-tab>
+		<fluent-tab id="overdrive">Overdrive</fluent-tab>
+		<fluent-tab id="boost">Boost</fluent-tab>
+		<fluent-tab id="harmonic_tremolo">Harmonic Tremolo</fluent-tab>
+		<fluent-tab id="chorus">Chorus</fluent-tab>
+		<fluent-tab id="delay">Delay</fluent-tab>
+		<fluent-tab id="multi_head_delay">Multi Head Delay</fluent-tab>
+		<fluent-tab id="tremolo">Tremolo</fluent-tab>
+		<fluent-tab id="reverb">Reverb</fluent-tab>		
+
+		<fluent-tab-panel id="wahPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="compressorPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="overdrivePanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="boostPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="htPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="chorusPanel">
+		</fluent-tab-panel>  
+		<fluent-tab-panel id="delayPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="mhdPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="tremoloPanel">
+		</fluent-tab-panel>
+		<fluent-tab-panel id="reverbPanel">
+		</fluent-tab-panel>		
+   </fluent-tabs>		
+  `;
 
   const pedals = [
-    //wahPedal,
+    wahPedal,
     compressorPedal,
-    //overdrivePedal,
-    //boostPedal,
-    //harmonicTremoloPedal,
+    overdrivePedal,
+    boostPedal,
+    harmonicTremoloPedal,
     chorusPedal,
     delayPedal,
-    //multiHeadDelay,
-    //tremoloPedal,
+    multiHeadDelay,
+    tremoloPedal,
     reverbPedal
   ]; 
 

docs/assets/src/pedals/boost.js

@@ -38,7 +38,7 @@ export const boostPedal = function(input, index) {
     value: defaults.gain
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#boostPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/chorus.js

@@ -86,7 +86,7 @@ export const chorusPedal = function(input, index) {
     }
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#chorusPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/compressor.js

@@ -78,7 +78,7 @@ export const compressorPedal = function(input, index) {
     onInput: updatePot(compressor.release)
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#compressorPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/delay.js

@@ -83,7 +83,7 @@ export const delayPedal = function(input, index) {
     value: defaults.tone
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#delayPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/harmonic-tremolo.js

@@ -96,7 +96,7 @@ export const harmonicTremoloPedal = function(input, index) {
     }
   })
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#htPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/multihead-delay.js

@@ -219,7 +219,7 @@ export const multiHeadDelay = function(input, index) {
   createDelayHead(fxSend, fxReturn, 0.5, 0.97561, 0.1);
   createDelayHead(fxSend, fxReturn, -0.5, 0.4878, 0.1);
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#mhdPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/overdrive.js

@@ -70,7 +70,7 @@ export const overdrivePedal = function(input, index) {
     onInput: updatePot(volume.gain)
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#overdrivePanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/reverb.js

@@ -67,7 +67,7 @@ export const reverbPedal = function(input, index) {
     value: defaults.tone
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#reverbPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/tremolo.js

@@ -75,7 +75,7 @@ export const tremoloPedal = function(input, index) {
     ]
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#tremoloPanel').appendChild(pedal);
 
   return output;
 };

docs/assets/src/pedals/wah.js

@@ -78,7 +78,7 @@ export const wahPedal = function(input, index) {
     value: defaults.boost
   });
 
-  $pedalboard.appendChild(pedal);
+  document.querySelector('#wahPanel').appendChild(pedal);
 
   return output;
 };

docs/index.html

@@ -19,19 +19,19 @@
 		<td><h2 id="statusMsg"></h2></td>
 		<td>
 			<div><center>
-				<a title='Toggle play/stop' class="play">On</a>
-				<a title='Style type' class="style_type">Normal</a>
-				<a title='Guitar playing style' class="gamepad_mode">Color Tabs</a>
-				<a title='Load external file (drum, chord, bass, midi, sty, etc)' class="load_file">Load</a>
-				<a title='Pair/Unpair LiberLive Guitar' style="display: none;" class="liber_live">LiberLive C1</a>					
-				<a style="display: none;" class="chorda_bluetooth">BT OFF</a>	
-				<a style="display: none;" class="delete_style">Delete Style</a>				
-				<a title='Toggle Pedalboard Display' class="pedal_board">Pedal Board</a>			
-				<a title='Edit Extended ChordPro song' class="chord_pro">ChordPro</a>
-				<a title='Display song lyrics' class="show_lyrics">Lyrics</a>				
-				<a title='Save all settings as a registration (1-7)' class="save_reg">Save</a>
-				<a title='Record performance as video or audio file' style="display: none;" class="record_song">Record</a>				
-				<a title='Refresh application for new settings to take effect' class="reset_app">Refresh</a>			
+				<fluent-button appearance="accent" title='Toggle play/stop' id="play">On</fluent-button>
+				<fluent-button appearance="accent" title='Style type' id="style_type">Normal</fluent-button>
+				<fluent-button appearance="accent" title='Guitar playing style' id="gamepad_mode">Color Tabs</fluent-button>
+				<fluent-button appearance="accent" title='Load external file (drum, chord, bass, midi, sty, etc)' id="load_file">Load</fluent-button>
+				<fluent-button appearance="accent" title='Pair/Unpair LiberLive Guitar' style="display: none;" id="liber_live">LiberLive C1</fluent-button>					
+				<fluent-button appearance="accent" style="display: none;" id="chorda_bluetooth">BT OFF</fluent-button>	
+				<fluent-button appearance="accent" style="display: none;" id="delete_style">Delete Style</fluent-button>				
+				<fluent-button appearance="accent" title='Toggle Pedalboard Display' id="pedal_board">Pedal Board</fluent-button>			
+				<fluent-button appearance="accent" title='Edit Extended ChordPro song' id="chord_pro">ChordPro</fluent-button>
+				<fluent-button appearance="accent" title='Display song lyrics' id="show_lyrics">Lyrics</fluent-button>				
+				<fluent-button appearance="accent" title='Save all settings as a registration (1-7)' id="save_reg">Save</fluent-button>
+				<fluent-button appearance="accent" title='Record performance as video or audio file' style="display: none;" id="record_song">Record</fluent-button>				
+				<fluent-button appearance="accent" title='Refresh application for new settings to take effect' id="reset_app">Refresh</fluent-button>			
 			</center><div>	
 			<div id="sequencer2" style="margin:10px">
 			    <span style="font-size: 14px;margin-left:2px" id="sequencer">Tempo:<span id="showTempo">100</span></span>	
@@ -49,7 +49,9 @@
 	</table>
 
     <canvas style="margin: 0; display: none;" id="lyrics"></canvas>	
-	<div style="display: none;" class="pedalboard"></div>	
+	<div style="display: none;" class="pedalboard">
+	</fluent-tabs>		
+	</div>	
 	<iframe src="https://jus-be.github.io/chordpro-pdf-online/" style="display: none;" id="chordpro"></iframe>	
 
 	<table id="settings" width="90%">	
@@ -58,8 +60,9 @@
 	    <td><select  title='Strum type for Pad 4'id="guitarStrum2" type="text" class="form-control input"></select></td>
 	    <td><select title='Strum type for Pad 5' id="guitarStrum3" type="text" class="form-control input"></select></td>
 	    <td><select title='Neck Position' id="guitarPosition" type="text" class="form-control input"><option value=1>I</option><option selected value=2>II</option><option value=3>III</option></select></td>		
+	    <td><select title='Guitar Effects Preset' id="effectsPreset" type="text" class="form-control input"><option selected value='default'>Default</option></select></td>				
 	</tr>	
-	<tr><td><b>Arranger Type</b></td><td><select id="arrangerType" type="text" class="form-control input"></select></td><td valign="top" rowspan="13" colspan="4"><div id="synth"></div></td></tr>	
+	<tr><td><b>Arranger Type</b></td><td><select id="arrangerType" type="text" class="form-control input"></select></td><td valign="top" rowspan="13" colspan="5"><div id="synth"></div></td></tr>	
 	<tr><td><b>Arranger Group</b></td><td><select id="arrangerGroup" type="text" class="form-control input"></select></td><td></td></tr>	
 	<tr><td><b>Arranger Style</b></td><td><select id="arrangerStyle" type="text" class="form-control input"></select></td><td></td></tr>	
 	<tr><td><b>Sound Font File</b></td><td><select id="arrangerSf2" type="text" class="form-control input"></select></td><td></td></tr>	

docs/js/main.js

@@ -285,7 +285,7 @@ function messageHandler(evt) {
 }
 
 function handleLiberLive(selected) {
-	const liberlive = document.querySelector(".liber_live");
+	const liberlive = document.querySelector("#liber_live");
 	liberlive.style.display = selected ? "" : "none";	
 	let device;
 
@@ -301,7 +301,7 @@ function handleLiberLive(selected) {
 }
 
 function handleRecordSong(selected) {
-	const recordSong = document.querySelector(".record_song");
+	const recordSong = document.querySelector("#record_song");
 	recordSong.style.display = selected ? "" : "none";
 
 	recordSong.addEventListener("click", async (evt) => {
@@ -945,16 +945,16 @@ function onChordaConnect() {
 		// Set up event listener for when characteristic value changes.
 		characteristic.addEventListener('characteristicvaluechanged',	handleChordaMidiMessage);
 		console.debug('Bluetooth MIDI Notifications have been started.')
-		document.querySelector(".chorda_bluetooth").innerHTML = "BT ON";
+		document.querySelector("#chorda_bluetooth").innerHTML = "BT ON";
 	})
 	.catch(error => { 
 		console.error('ERRORCODE: ' + error); 
-		document.querySelector(".chorda_bluetooth").innerHTML = "BT Error";		
+		document.querySelector("#chorda_bluetooth").innerHTML = "BT Error";		
 	});	
 }
 
 function onChordaDisconnected(event) {
-	document.querySelector(".chorda_bluetooth").innerHTML = "BT OFF";	
+	document.querySelector("#chorda_bluetooth").innerHTML = "BT OFF";	
 	if (!bluetoothDevice || !bluetoothDevice.gatt.connected) return;
 	bluetoothDevice.gatt.disconnect();
 	let device = event.target;
@@ -992,9 +992,9 @@ function onloadHandler() {
 	if (!!chrome.runtime?.getManifest) version = chrome.runtime.getManifest().version;
 	document.title = "Orin Ayo | " + version;
 
-	playButton = document.querySelector(".play");
-	gamePadModeButton = document.querySelector(".gamepad_mode");
-	styleType = document.querySelector(".style_type");
+	playButton = document.querySelector("#play");
+	gamePadModeButton = document.querySelector("#gamepad_mode");
+	styleType = document.querySelector("#style_type");
 	tempoCanvas = orinayo = document.querySelector('#tempoCanvas');	
 	orinayo = document.querySelector('#orinayo');
 	orinayo_section = document.querySelector('#orinayo-section');
@@ -1069,7 +1069,7 @@ function onloadHandler() {
 		handleFileContent(event);
 	});	
 
-	const deleteStyle = document.querySelector(".delete_style");
+	const deleteStyle = document.querySelector("#delete_style");
 
 	deleteStyle.addEventListener('click', function(event) {
 		if (arrSequence?.name) {
@@ -1085,7 +1085,7 @@ function onloadHandler() {
 	const chordpro = document.querySelector("#chordpro");
 	const settings = document.querySelector("#settings");	
 
-	const pedalBoard = document.querySelector(".pedal_board");
+	const pedalBoard = document.querySelector("#pedal_board");
 
 	pedalBoard.addEventListener('click', function(event) {		
 		board.style.display = "none";
@@ -1103,7 +1103,7 @@ function onloadHandler() {
 		}
 	});	
 
-	const chordPro = document.querySelector(".chord_pro");
+	const chordPro = document.querySelector("#chord_pro");
 
 	chordPro.addEventListener('click', function(event) {
 		board.style.display = "none";
@@ -1120,7 +1120,7 @@ function onloadHandler() {
 		}
 	});	
 
-	const showLyrics = document.querySelector(".show_lyrics");
+	const showLyrics = document.querySelector("#show_lyrics");
 	const lyricsContext = lyricsCanvas.getContext('2d');
 	lyricsContext.fillStyle = "#000000";	
     lyricsContext.fillRect(0, 0, lyricsCanvas.width, lyricsCanvas.height);	
@@ -1143,13 +1143,13 @@ function onloadHandler() {
 	});		
 
 
-	const chordaBluetooth = document.querySelector(".chorda_bluetooth");
+	const chordaBluetooth = document.querySelector("#chorda_bluetooth");
 
 	chordaBluetooth.addEventListener('click', function(event) {
 		onChordaConnect(event);
 	});		
 
-	const saveReg = document.querySelector(".save_reg")
+	const saveReg = document.querySelector("#save_reg")
 
 	saveReg.addEventListener('click', function(event) {
 		const slot = prompt("Enter save slot number");
@@ -1159,14 +1159,14 @@ function onloadHandler() {
 		}
 	});
 
-	resetApp = document.querySelector(".reset_app")
+	resetApp = document.querySelector("#reset_app")
 
 	resetApp.addEventListener('click', function(event) {
 		registration = 0;
 		location.reload();
 	});	
 
-	loadFile = document.querySelector(".load_file")
+	loadFile = document.querySelector("#load_file")
 
 	loadFile.addEventListener('click', function(event) {
 		upload.click();	
@@ -2702,7 +2702,7 @@ async function setupUI(config,err) {
 
 		midiGuitar = window["_tone_" + guitarName];				
 		player.loader.decodeAfterLoading(guitarContext, '_tone_' + guitarName);
-		padsMode = config.padsMode || 2;
+		padsMode = config.padsMode || 3;
 		orinayo_pad.innerHTML = "Pad " + padsMode;			
 	}	
 
@@ -3245,7 +3245,7 @@ async function setupUI(config,err) {
 		window.tempConfig = config; // store config for later access
 		arrSynth = {name: config.sf2Name};	
 		getArrSequence(config.arrName, arrSequenceLoaded);	
-		document.querySelector(".delete_style").style.display = "";		
+		document.querySelector("#delete_style").style.display = "";		
 	}
 	else {
 
@@ -4146,7 +4146,8 @@ function playChord(chord, root, type, bass) {
 	const guitarPosition = document.getElementById("guitarPosition").selectedIndex;	
 	const guitarDuration = 240 / tempo; 
 	const bassNote = (chord.length == 4 ? chord[0] : chord[0] - 12);
-	const rootNote = (chord.length == 4 ? chord[0] + 12 : chord[0]) + (guitarPosition * 12);			
+	const rootNote = (chord.length == 4 ? chord[0] : chord[0] - 12) + (guitarPosition * 12);	
+	const firstNote = (chord.length == 4 ? chord[1] : chord[0]);	
 	const thirdNote = (chord.length == 4 ? chord[2] : chord[1]);	
 	const fifthNote = (chord.length == 4 ? chord[3] : chord[2]);
 
@@ -4156,7 +4157,7 @@ function playChord(chord, root, type, bass) {
 	if (!activeChord) {
 		const arrChord = (firstChord.length == 4 ? firstChord[1] : firstChord[0]) % 12;
 		const key = "key" + arrChord + "_" + arrChordType + "_" + SECTION_IDS[sectionChange];
-		const bassKey = "key" + (chord[0] % 12) + "_" + arrChordType + "_" + SECTION_IDS[sectionChange];
+		const bassKey = "key" + (firstNote % 12) + "_" + arrChordType + "_" + SECTION_IDS[sectionChange];
 
 		if (guitarName != "none" && !guitarDeviceId) 
 		{	

docs/js/styles.js

@@ -308,10 +308,22 @@ var drum_loops = [
 ]
 
 var bass_loops = [
+	"assets/bass/acoustic-guitar_75_25600.bass",
+	"assets/bass/bluey_88_21818.bass",	
+	"assets/bass/country_073_26300.bass",	
 	"assets/bass/country-beat_124_15484.bass",
+	"assets/bass/country-rock_180_10667.bass",
+	"assets/bass/dream_85_22588.bass",
+	"assets/bass/funk_130_14769.bass",
 	"assets/bass/funky-beat_95_10105.bass",
 	"assets/bass/funky-groove_108_8889_4.bass",
+	"assets/bass/gospel-funk_90_21333.bass",
+	"assets/bass/jazzy-funk_110_17455.bass",
 	"assets/bass/mystic-acoustic_75_12800.bass",
-	"assets/bass/pop_100_19200.bass",
-	"assets/bass/rock_120_8000.bass"
+	"assets/bass/pop_90_10667.bass",
+	"assets/bass/pop_100_19200_2.bass",
+	"assets/bass/rock_120_8000.bass",
+	"assets/bass/rock-ballad_80_24000.bass",
+	"assets/bass/soul-band_90_21333.bass",
+	"assets/bass/u2-guitar_105_18286.bass"	
 ]