X0X Clap

Developer
André Michelle
Size
2,825 Kb
Views
18,216
  1. X0X Clap Previews
  2. X0X Clap HTML Codes
  3. X0X Clap CSS Codes
  4. X0X Clap JS Codes

How do I make an x0x clap?

Trying to emulate a 808/909 clap. What is a x0x clap? How do you make a x0x clap? This script and codes were developed by André Michelle on 18 October 2022, Tuesday.

X0X Clap Previews
IQ Test

X0X Clap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>X0X Clap</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div>	<h3>Click for a Roland TR-X0X Clap</h3>	<p>Emulated using the Web-Audio-Api</p>	<footer>Chrome only</footer>
</div> <script src="js/index.js"></script>
</body>
</html>

X0X Clap - Script Codes CSS Codes

html, body {	width: 100%;	color: #666;	background: #222;	font-family: Open Sans;	user-select: none;	-webkit-user-select: none;	cursor: pointer;
}
* {	margin: 0;
}
div {	top: 50%;	left: 50%;	padding: 8px;	transform: translateX(-50%) translateY(-50%);	position: absolute;	background-color: #333;	border-radius: 4px;	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.75);
}
div p {	color: #888;	letter-spacing: 0.6px;
}
div footer {	font-size: 9px;	color: #C33;	float: right;	letter-spacing: 2.6px;
}

X0X Clap - Script Codes JS Codes

// CHROME ONLY !!!
// Firefox sounds differently. Too lazy to check Safari.
// Roland inspired clap sound emulation (web-audio-api)
// [email protected]
// This emulation is build on information
// about the 808 and 909 clap circuit.
// However, to get the real thing one must
// analyse the actual noise spectrum
// and the envelope shape and times.
// The clap sound is created by gating a
// noise-source instead of a start/stop
// mechanism. This makes the clap sound
// different every time you trigger it.
var context = new AudioContext();
var random = (function() {	var seed = 0xCBABCDEF;	return function() {	return (seed = (seed * 16807) % 2147483647) / 2147483647.0;	};
})();
// 2 seconds noise buffer
var noiseBuffer = (function() {	var buffer = context.createBuffer(1, context.sampleRate * 2, context.sampleRate);	var data = buffer.getChannelData(0);	for (var i = 0; i < data.length; ++i) {	data[i] = random() * 2.0 - 1.0;	}	return buffer;
})();
var noise = (function() {	var source;	source = context.createBufferSource();	source.buffer = noiseBuffer;	source.loop = true;	// source.playbackRate.value = 0.25; //interesting!	return source;
})();
var bandpassA = context.createBiquadFilter();
bandpassA.type = "bandpass";
bandpassA.Q.value = .8;
bandpassA.frequency.value = 1000.0;
var bandpassB = context.createBiquadFilter();
bandpassB.type = "bandpass";
bandpassB.Q.value = .8;
bandpassB.frequency.value = 1000.0;
var highPass = context.createBiquadFilter();
highPass.type = "highpass";
highPass.Q.value = 0.1;
highPass.frequency.value = 1000.0;
var mainEnvelope = context.createGain();
var clapEnvelope = context.createGain();
var clapGain = context.createGain();
clapGain.gain.value = 2.0;
noise.start();
noise.connect(bandpassA);
bandpassA.connect(bandpassB);
bandpassB.connect(highPass);
highPass.connect(clapEnvelope);
clapEnvelope.connect(mainEnvelope);
mainEnvelope.connect(clapGain);
mainEnvelope.gain.value = 0;
clapGain.connect(context.destination);
var clap = function(time) {	var t = time;	for (var i = 0; i < 3; ++i) {	var r = (Math.random() - Math.random()) * 0.001;	clapEnvelope.gain.setValueAtTime(1.0, t);	clapEnvelope.gain.linearRampToValueAtTime(0.0, t += 0.010 + i * 0.001 + r);	}	clapEnvelope.gain.setValueAtTime(1.0, t);	mainEnvelope.gain.setValueAtTime(1.0, time);	mainEnvelope.gain.setTargetAtTime(0.0, t, 0.075);
};
window.addEventListener("mousedown", function() {	clap(context.currentTime);
});
X0X Clap - Script Codes
X0X Clap - Script Codes
Home Page Home
Developer André Michelle
Username andremichelle
Uploaded October 18, 2022
Rating 4
Size 2,825 Kb
Views 18,216
Do you need developer help for X0X Clap?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

André Michelle (andremichelle) Script Codes
Name
Happy PI Day
Web Audio Api Equalizer
Web Audio Api MultiBandCompressor
Web Audio Api HardLimiter
Animated text on bezier curve
Loop Mixing
Noise monotone increasing
Dub Techno Chords
Instable Connection
Geolocation Api
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!