Trying to repurpose my Simon Game from the previous Curiculm to function as a drum machine.
Really just trying to get body.addEventLiserner('keypress'. eventFunction); on the whole body to fire an audio tag from the keyboard
LiveServer in VSCode locally will play the audio tags, but not on github.io
Word on the St. promotional drum beats
GitHub
HTML
<div class="ontainer">
<section id="Natural">
<audio controls>
<source src="../SPN(LoopMp3)/HipHOP_Bap006.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="https://github.com/TurtleWolf/WordONtheDrumMachine/blob/master/SPN(LoopMp3)/ArabWham(SPN).mp3">link
to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="../SPN(LoopMp3)/ArabWham(SPN).mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is
a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
</section>
<div class="checkbox">
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
</div>
<div class="container">
<div class="pad padz green">
<!-- The classes padz (4) are used in the HTML but not found in any stylesheet. -->
<audio preload="auto" id="audioGreen" src="../SPN(LoopMp3)/ArabWham(SPN).mp3" />
</audio>
</div>
<!-- upper left -->
<div class="pad padz red">
<audio preload="auto" id="audioRed" src="../SPN(LoopMp3)/CrazyTown(SPN).mp3" />
</audio>
</div>
<!-- upper right -->
<div class="pad padz yellow">
<audio preload="auto" id="audioYellow" src="../SPN(LoopMp3)/DooSoul(SPN).mp3" />
</audio>
</div>
<!-- lower left -->
<div class="pad padz blue">
<audio preload="auto" id="audioBlue" src="../SPN(LoopMp3)/DoYoThang(SPN).mp3" />
</audio>
</div>
<!-- lower right -->
<div class="pad tapper">
<!-- An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead. -->
<!-- convert to an event handler -->
<div>
<span id="level_Display"></span>
<span class="spacer"></span>
<span id="simon_sSequence">Shall we</span>
<span class="spacer"></span>
<span id="player_sInput">play a game?</span>
</div>
<!-- end of "display" -->
</div>
<!-- end of "startTapper" -->
</div>
<!-- end of "container" -->
<audio preload="auto" id="audioT" src="../SPN(LoopMp3)/HipHOP_Bap006.mp3" />
</audio>
<audio preload="auto" id="audioE" src="../SPN(LoopMp3)/K.I.S.S.(SPN).mp3" />
</audio>
</div>
JavaScript
var globalVolume = 1;
window.SetVolume = function(val) {
var player = document.getElementsByTagName("audio");
console.log("Before: " + player.volume);
player.volume = val / 100;
globalVolume = player.volume;
console.log("After: " + player.volume);
};
var clickCounter = 0;
var currentLevel = 1;
var simon_sSequence = [];
var player_sInput = [];
const audioTapper = document.querySelector("#audioT");
const audioError = document.querySelector("#audioE");
const levelDisplay = document.getElementById("level_Display");
const simonzSequence = document.getElementById("simon_sSequence");
const playerInput = document.getElementById("player_sInput");
const start_Tapper = document.querySelector(".tapper");
start_Tapper.addEventListener("click", Start); //end of EventListener
function Start() {
audioTapper.volume = globalVolume;
audioTapper.play();
player_sInput = []; //clear player's input for this turn
clickCounter = 0;
levelDisplay.textContent = "Level: " + currentLevel;
//generate a random number & push it to simon_sSequence
simon_sSequence.push(Math.floor(Math.random() * 4));
//for each in the array set time interval(300ms);
//dipslay hover effect
//play pad sound
simonzSequence.textContent = "Simon says " + simon_sSequence;
playerInput.textContent = "Player's reply " + player_sInput;
start_Tapper.removeEventListener("click", Start); //end of EventListener
start_Tapper.addEventListener("click", Reset); //start EventListener
} //end of resetStart
function Reset() {
// start of reset
currentLevel = 1;
const levelDisplay = document.getElementById("level_Display");
simon_sSequence = [];
Start();
} //end of Reset
const pads = document.querySelectorAll(".padz");
// Convert the padz list to an array we can iterate using .forEach()
Array.from(pads).forEach((padi, indez) => {
// Get the associated audio element nested in the padz-div
const audio = padi.querySelector("audio");
// Add a click listener to each pad which
// will play the audio, push the index to
// the user input array, and update the span
padi.addEventListener("click", () => {
player_sInput.push(indez);
if (player_sInput[clickCounter] !== simon_sSequence[clickCounter]) {
audioError.volume = globalVolume;
audioError.play();
clickCounter = 0;
player_sInput = []; //clear player's input for this turn
playerInput.textContent = "Player's reply " + player_sInput;
$("body").animate({ backgroundColor: "red" }, 100);
//$(".startTapper div").animate({ backgroundColor: "red" }, 100);
$(".container").effect("shake", { times: 100 }, 1000, "linear");
$("body").animate({ backgroundColor: "gray" }, 5000);
//$(".startTapper div").animate({ backgroundColor: "gray" }, 5000);
if (document.querySelector(".inStrict").checked) {
Reset();
} //end of 2nd if, console.log("wrong");
} else {
//end of 1st if
audio.volume = globalVolume;
audio.play();
playerInput.textContent = "Player's reply " + player_sInput;
clickCounter++;
if (
player_sInput.length == simon_sSequence.length &&
currentLevel === 20
) {
//playerInput.textContent = "Simon says you have won my memory quiz";
console.log("Winner, 20 = right");
//force training wheels to hide after first win
Reset();
} //end of 3rd if, AND current level ==20
if (player_sInput.length == simon_sSequence.length) {
currentLevel++;
Start();
} //end of 4th if, console.log(clickCounter);
} //end of else
}); //end of EventListener
}); //end of Array.from(pads).forEach((pad, index)