Electro House Bass Synth
About this app
Create and manipulate rich electro house bass sounds with our interactive synth app. Customize your sound with oscillators, filters, and effects!
Electro House Bass Synth Electro House Bass Synth Start Synth Wave Type: Sine Square Sawtooth Triangle Frequency: Frequency: 440 Hz Gain:
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Electro House Bass Synth</title>
<meta name="description" content="Create and manipulate rich electro house bass sounds with our interactive synth app. Customize your sound with oscillators, filters, and effects!">
<meta name="keywords" content="synth, electronic music, electro house, music studio, audio generation, sound design">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// AudioContext for synthesizer
const context = new (window.AudioContext || window.webkitAudioContext)();
let oscillator;
let gainNode;
document.addEventListener("DOMContentLoaded", function() {
const startBtn = document.getElementById("start-synth");
startBtn.addEventListener("click", startSynth);
const freqInput = document.getElementById("frequency");
freqInput.addEventListener("input", updateFrequency);
const waveType = document.getElementById("wave-type");
waveType.addEventListener("change", updateWaveType);
const gainInput = document.getElementById("gain");
gainInput.addEventListener("input", updateGain);
});
function startSynth() {
oscillator = context.createOscillator();
gainNode = context.createGain();
oscillator.connect(gainNode);
gainNode.connect(context.destination);
oscillator.start();
updateFrequency();
updateGain();
}
function updateFrequency() {
const frequency = document.getElementById("frequency").value;
oscillator.frequency.setValueAtTime(frequency, context.currentTime);
document.getElementById("freq-display").innerText = frequency + " Hz";
}
function updateWaveType() {
const waveType = document.getElementById("wave-type").value;
oscillator.type = waveType;
}
function updateGain() {
const gainValue = document.getElementById("gain").value;
gainNode.gain.setValueAtTime(gainValue, context.currentTime);
}
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #0077ff, #00ccff);
color: white;
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
margin-top: 50px;
}
h1 {
margin-bottom: 30px;
}
input[type="range"] {
width: 100%;
margin: 20px 0;
}
.btn {
background-color: #ff4c00;
}
.btn:hover {
background-color: #e03b00;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Electro House Bass Synth</h1>
<button id="start-synth" class="btn btn-success">Start Synth</button>
<div class="form-group">
<label for="wave-type">Wave Type:</label>
<select id="wave-type" class="form-select">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">Sawtooth</option>
<option value="triangle">Triangle</option>
</select>
</div>
<div class="form-group">
<label for="frequency">Frequency:</label>
<input type="range" id="frequency" class="form-range" min="20" max="2000" step="1" value="440">
<p>Frequency: <span id="freq-display">440 Hz</span></p>
</div>
<div class="form-group">
<label for="gain">Gain:</label>
<input type="range" id="gain" class="form-range" min="0" max="1" step="0.01" value="0.5">
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!