Added lamp for visual feedback on tones

This commit is contained in:
Nathan McRae 2023-03-11 12:42:10 -08:00
parent 2b284f776a
commit 47fe262d83
3 changed files with 16 additions and 1 deletions

View File

@ -54,6 +54,7 @@ available towards the bottom.</p>
<br>
<div class="button-container">
<button id="submitButton" class="interaction-button" disabled="disabled">Enter</button>
<button id="beepLamp" class="lamp" disabled="disabled"/>
<button id="resetButton" class="interaction-button" disabled="disabled">Replay</button>
</div>
</div>

View File

@ -30,11 +30,13 @@ async function initializeAudioContext() {
function startNotePlaying() {
// Pass a start time of 0 so it starts ramping up immediately.
gain_node.gain.setTargetAtTime(0.1, 0, 0.001)
$("#beepLamp").addClass("lamp-on")
}
function stopNotePlaying() {
// Pass a start time of 0 so it starts ramping down immediately.
gain_node.gain.setTargetAtTime(0, 0, 0.001)
$("#beepLamp").removeClass("lamp-on")
}

View File

@ -24,6 +24,18 @@
font-size: 20px;
}
.lamp {
width: 100px;
height: 100px;
border-radius: 100%;
margin: 10px;
font-size: 20px;
}
.lamp-on {
background: darkgray;
}
.game-container {
display: flex;
justify-content: center;
@ -57,4 +69,4 @@
#speed-table {
max-width: 100%;
overflow: scroll;
}
}