We have featured a few of our DIY ham radio Morse Code Keys here before, but this one is less than a dollar, super portable, and actually works surprisingly well. I may have found my new hiking key!
-----
Sunday, March 24, 2024
Headphone Jack turns Ham Radio Morse Key
Thursday, March 21, 2024
HTML Help for Guitar Chord Changes
-----
We committed to learning the guitar (again). However, this time we are taking a more methodical approach vs. just getting frustrated that we don't sound like Monte Montgomery.
The internet is helpful and one of our favorite resources has been Lauren Bateman who encourages "Embace the Suck". Lauren encourages other things too... like practicing chord changes with a metronome and keeping a progress log. These two suggestions are huge. We created some simple HTML markup to help us practice random chord changes and, gotta say, you show more results with practice than with excuses.
Just copy and save the HTML markup between the "-----"s below on your hard drive as "random_guitar_chords.html" and it should work in any web browser. NOTE: There is no spyware, tracking, cookies, disk writes, etc. Feel free to edit the HTML to meet your needs.
Good luck and see you on the stage!
-----
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Guitar Chords</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#chordDisplay {
font-size: 36px;
margin-top: 50px;
}
.checkbox-container {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>Select Guitar Chords</h1>
<form id="chordForm">
<div class="checkbox-container">
<input type="checkbox" id="A" value="A" checked>
<label for="A">A</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="C" value="C" checked>
<label for="C">C</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="D" value="D" checked>
<label for="D">D</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="E" value="E" checked>
<label for="E">E</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="Em" value="Em" checked>
<label for="Em">Em</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="F" value="F" checked>
<label for="F">F</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="F#m" value="F#m" checked>
<label for="F#m">F#m</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="G" value="G" checked>
<label for="G">G</label>
</div>
</form>
<p><strong>!!! ALWAYS USE A METRONOME AND LOG YOUR PROGRESS!!!</strong></p>
<label for="initialChordsSelect">How many chords to cycle:</label><br>
<select id="initialChordsSelect">
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select><br>
<br>
<label for="timeSelect">Seconds until next random chords:</label><br>
<select id="timeSelect">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60" selected>60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
<option value="90">90</option>
<option value="95">95</option>
<option value="100">100</option>
<option value="105">105</option>
<option value="110">110</option>
<option value="115">115</option>
<option value="120">120</option>
</select><br>
<br>
<button onclick="startDisplay()">Let's Jam!</button>
<div id="chordDisplay"></div>
<br>
<div id="timer"></div>
<br>
<div id="totalMinutes"></div>
<script>
var startTime;
var timerInterval;
function startDisplay() {
clearInterval(timerInterval); // Clear previous interval
document.getElementById("chordDisplay").textContent = ""; // Clear previous chords
document.getElementById("timer").textContent = ""; // Clear previous timer
startTime = new Date().getTime();
displayChords();
displayTimer();
}
function displayChords() {
var chords = [];
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
for (var i = 0; i < checkboxes.length; i++) {
chords.push(checkboxes[i].value);
}
var numInitialChords = parseInt(document.getElementById("initialChordsSelect").value);
var initialChords = [];
for (var i = 0; i < numInitialChords; i++) {
var randomChord;
do {
randomChord = chords[Math.floor(Math.random() * chords.length)];
} while (initialChords.includes(randomChord));
initialChords.push(randomChord);
}
document.getElementById("chordDisplay").textContent = initialChords.join(" ");
}
function displayTimer() {
var timeInSeconds = parseInt(document.getElementById("timeSelect").value);
var count = timeInSeconds;
timerInterval = setInterval(function() {
count--;
if (count <= 0) {
clearInterval(timerInterval);
document.getElementById("timer").textContent = "";
displayChords();
setTimeout(displayTimer, 1000); // Restart the timer after displaying new chords
} else {
document.getElementById("timer").textContent = "SPACEBAR for immediately ELSE selecting new chords in: " + count + " seconds";
updateTimeElapsed();
}
}, 1000);
function updateTimeElapsed() {
var currentTime = new Date().getTime();
var elapsedTime = (currentTime - startTime) / (1000 * 60);
document.getElementById("totalMinutes").textContent = "Total practice time in minutes: " + elapsedTime.toFixed(1);
}
}
document.body.addEventListener('keydown', function(e) {
if (e.keyCode === 32) { // Spacebar key code
clearInterval(timerInterval);
document.getElementById("chordDisplay").textContent = ""; // Clear previous chords
document.getElementById("timer").textContent = ""; // Clear previous timer
displayChords();
displayTimer();
e.preventDefault(); // Prevent default spacebar behavior (scrolling)
}
});
</script>
</body>
</html>
-----
Subscribe to:
Posts (Atom)