Complextro Instruments Simulator
About this app
A fun and interactive Complextro instruments simulator that allows users to mix and create electronic music with various sounds and effects.
Complextro Instruments Simulator Complextro Instruments Simulator
Related apps
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>Complextro Instruments Simulator</title>
<meta name="description" content="A fun and interactive Complextro instruments simulator that allows users to mix and create electronic music with various sounds and effects.">
<meta name="keywords" content="music, simulator, Complextro, electronic, sounds, effects, mixing, fun, interactive">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<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 {
// App Javascript Goes Here
const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
const instruments = ['Synth', 'Piano', 'Guitar', 'Bass'];
function playSound(instrument, note) {
const audio = new Audio(`sounds/${instrument}/${note}.mp3`);
audio.play();
}
function createMixer() {
const mixer = $('#mixer');
instruments.forEach(instrument => {
const instrumentDiv = $('<div class="instrument"></div>');
instrumentDiv.append(`<h3>${instrument}</h3>`);
notes.forEach(note => {
const button = $(`<button class="btn btn-primary m-1">${note}</button>`);
button.click(() => playSound(instrument.toLowerCase(), note));
instrumentDiv.append(button);
});
mixer.append(instrumentDiv);
});
}
document.addEventListener("DOMContentLoaded", function() {
createMixer();
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #1c2b3a, #282e34);
color: #fdfdfd;
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
padding: 20px;
}
h1 {
margin: 20px;
font-weight: bold;
color: #f39c12;
}
.instrument {
margin: 20px;
border: 2px solid #f39c12;
border-radius: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
}
button {
transition: transform 0.1s;
}
button:hover {
transform: scale(1.1);
background-color: #e67e22;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Complextro Instruments Simulator</h1>
<div id="mixer" class="row"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!