Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="shapeSelections">
	<div class="btn-row">
		<button class="line active">
			<svg viewBox="-10 -10 120 120">
				<path d="M50 0 v100z" fill="none" stroke="#0f0" stroke-width="4" />
			</svg>
		</button>
		<button class="tri active">
			<svg viewBox="-10 -10 120 120">
				<path d="M50 0 l57.735026918962582 100h-115.470053837925164z" fill="none" stroke="#00f" stroke-width="4" />
			</svg>
		</button>
		<button class="square active">
			<svg viewBox="-10 -10 120 120">
				<path d="M50 0 l50 50l-50 50l-50 -50z" fill="none" stroke="#f00" stroke-width="4" />
			</svg>
		</button>
		<button class="pent active">
			<svg viewBox="-10 -10 120 120">
				<path d="M50 0L102.57311078393393 38.19660081406526L82.4919693587848 99.99999918593474L17.508030641215207 99.99999918593474L-2.5731107839339344 38.19660081406526z" fill="none" stroke="#ff0" stroke-width="4" />
			</svg>
		</button>
	</div>
	<input type="range" min="500" max="5000" value="2000" class="slider">
	<div class="btn-row">
		<span class="sVal"><span class="slider-value">2000</span>ms</span>
	</div>
</div>
<div class="btn-row">
<svg id="polyrythm" viewBox="-10 -10 120 120">
	
	<path id="p2" d="M50 0 v100z" fill="none" stroke="#0f0" stroke-width="2" />
	<path id="p3" d="M50 0 l57.735026918962582 100h-115.470053837925164z" fill="none" stroke="#00f" stroke-width="2" />
	<path id="p4" d="M50 0 l50 50l-50 50l-50 -50z" fill="none" stroke="#f00" stroke-width="2" />
	<path id="p5" d="M50 0L102.57311078393393 38.19660081406526L82.4919693587848 99.99999918593474L17.508030641215207 99.99999918593474L-2.5731107839339344 38.19660081406526z" fill="none" stroke="#ff0" stroke-width="2" />

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	margin: 0 auto;
	background: #000;
}
#polyrythm {
	position: relative;
	min-width: 100px;
	min-height: 100px;
	max-height: clamp(100px, calc(100vh - 130px), 400px);
	max-width: clamp(100px, calc(100vw - 100px), 400px);
}
#soundIcon {
	cursor: pointer;
	background: none;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	padding: 5px;
	height: 50px;
	width: 50px;
	border: none;
}
.shapeSelections {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.btn-row {
	display: flex;
	justify-content: center;
	margin-bottom: 10px; /* Adjust margin between button rows */
}
.shapeSelections button {
	position: relative;
	height: 50px;
	width: 50px;
	margin: 5px;
	padding: 10px;
	background: none;
	cursor: pointer;
	border: none;
}
.shapeSelections button.active {
	border: 2px solid rgba(255, 255, 255, 0.2);
}
.shapeSelections button:hover {
	border: 2px solid rgba(255, 255, 255, 0.1);
}
.shapeSelections button:active {
	border: 2px solid rgba(0, 255, 255, 0.2);
}
.shapeSelections button svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.gonezo {
	opacity: 0;
}
.sVal {
	color: #fff;
}
.slider {
	width: 230px;
	cursor: grab;
}
.slider:active {
	cursor: grabbing;
}
/* Styling the slider for Chrome, Edge, and other WebKit-based browsers */
.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 230px;
	height: 10px;
	background-color: #000;
	border-radius: 5px;
	outline: none;
	margin-bottom: 5px;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background-color: #333;
	border-radius: 50%;
}

.slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 10px;
	background-color: #333;
	border-radius: 5px;
}

/* Styling the slider for Firefox */
.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background-color: #333;
	border: none;
	border-radius: 50%;
}

.slider::-moz-range-track {
	width: 100%;
	height: 10px;
	background-color: #222;
	border-radius: 5px;
}

/* Styling the slider for Safari */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	transform: translateY(-5px);
	background-color: #333;
	border-radius: 50%;
}

.slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 10px;
	background-color: #222;
	border-radius: 5px;
}

console.log("Event Fired")
// Initialize audio context and nodes globally
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let oscillator = null;
let gainNode = audioContext.createGain();
gainNode.connect(audioContext.destination);

// Set pitch (in Hz)
	oscillator.frequency.value = pitch;

// Start oscillator
	oscillator.start();

// Set volume to full
	gainNode.gain.setValueAtTime(1, audioContext.currentTime);

// Fade out
	gainNode.gain.exponentialRampToValueAtTime(
		0.001,
		audioContext.currentTime + duration / 1000
	);

// Stop oscillator after duration
	setTimeout(function () {
		if (oscillator && oscillator.state !== "closed") {
			oscillator.stop();
			oscillator = null; // Reset oscillator
		}
	}, duration);
}

let int2, int3, int4, int5;

let bloops = false;
let soundOn = false;

// Get all buttons
const buttons = document.querySelectorAll(".shapeSelections button");

// Loop through each button and add click event listener
buttons.forEach((button) => {
	button.addEventListener("click", () => {
		// Toggle active class for the clicked button
		button.classList.toggle("active");
		clearSounds();
		addSound(true);

if (button.classList.contains("pent")) {
			document.querySelector("#p5").classList.toggle("gonezo");
			document.querySelector("#c5").classList.toggle("gonezo");
		} else if (button.classList.contains("square")) {
			document.querySelector("#p4").classList.toggle("gonezo");
			document.querySelector("#c4").classList.toggle("gonezo");
		} else if (button.classList.contains("tri")) {
			document.querySelector("#p3").classList.toggle("gonezo");
			document.querySelector("#c3").classList.toggle("gonezo");
		} else if (button.classList.contains("line")) {
			document.querySelector("#p2").classList.toggle("gonezo");
			document.querySelector("#c2").classList.toggle("gonezo");
		}
	});
});

let sliderValue = 2000;
// Get the slider element
const slider = document.querySelector(".slider");
// Get the span element for displaying slider value
const sliderValueSpan = document.querySelector(".slider-value");
// Get all SVG elements with the "move" class
const moveElements = document.querySelectorAll(".move");

// Add an input event listener to the slider
slider.addEventListener("input", function () {
	// Get the slider value
	sliderValue = this.value;
	addSound(true);
	// Update the span element to display the current slider value
	sliderValueSpan.textContent = sliderValue;
	// Update the animation duration for each SVG element with the "move" class
	moveElements.forEach((element) => {
		// Update the animation duration based on the slider value
		element.setAttribute("dur", sliderValue + "ms");
	});
});

Frontend Forever App