Colors and Sounds
How do I make an colors and sounds?
What is a colors and sounds? How do you make a colors and sounds? This script and codes were developed by Sky on 29 January 2023, Sunday.
Colors and Sounds - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colors and Sounds</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="green" class="square"></div>
<div id="red" class="square"></div>
<div id="yellow" class="square"></div>
<div id="blue" class="square"></div>
<button id="lightemup">Light up random colors</button>
<pre id="debug"></pre> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Colors and Sounds - Script Codes CSS Codes
body { background-color: #222; min-height: 100vh; min-width: 280px; max-width: 1024px; margin: 0 auto; padding: 0; text-align: center;
}
.square { width: calc(25% - 8px); height: 200px; opacity: 0.6; display: inline-block; margin-top: 40px; border: 1px solid transparent;
}
#lightemup { margin-top: 2em; padding: .35em;
}
.lit { opacity: 1; border: 1px solid #eee; box-shadow: 5px 8px 17px 5px rgba(100, 100, 100, 0.2);
}
#debug { background-color: #eee; color: #222; text-align: left; max-width: 100vw;
}
Colors and Sounds - Script Codes JS Codes
"use strict";
// give a background color to each element according to its ID
$.each($(".square"), function (i, el) { return $(el).css("background-color", el.id);
});
// Play a sound and light up the square when clicked/tapped
$(".square").on("click", function (e) { return activateColor(e.target, 400);
});
// light up the element specified and play its corresponding sound
function activateColor(element, duration) { playSound(element.id, duration); $(element).addClass("lit").delay(duration).promise().then(function () { $(element).removeClass("lit"); });
}
function playSound(color, duration) { // create the audio context var AudioContext = window.AudioContext || window.webkitAudioContext, audioCtx = new AudioContext(), oscillator = audioCtx.createOscillator(), gainNode = audioCtx.createGain(), colors = { // http://www.phy.mtu.edu/~suits/notefreqs.html blue: 329.63, // e4 green: 164.81, // e3 yellow: 277.18, // c#4 red: 220.0 // a3 }; // audio play settings gainNode.gain.value = 0.5; gainNode.connect(audioCtx.destination); gainNode.gain.linearRampToValueAtTime(.5, audioCtx.currentTime, duration + 2.5); gainNode.gain.setTargetAtTime(0, audioCtx.currentTime, duration + 1); oscillator.frequency.value = colors[color]; oscillator.type = "triangle"; oscillator.connect(gainNode); oscillator.start(0); oscillator.stop(audioCtx.currentTime + duration / 1000 + 0.05); oscillator.onended = function () { return audioCtx.close(); };
}
// play a sequence of random colors when clicking the lightemup button
$("#lightemup").on("click", function () { var colors = ["blue", "green", "yellow", "red"], randomNum = function randomNum() { return Math.floor(Math.random() * colors.length); }, randomColors = [], duration = 400, numberOfColors = 12; for (var i = 0; i < numberOfColors; i++) { randomColors.push(colors[randomNum()]); }playSequence(randomColors, duration); $(this).prop("disabled", true);
});
// take an array of colors and a delay to light up each square in a sequence
function playSequence(colors, delay) { $({}).queue("_fx", colors.map(function (color, i) { return function (next) { $("#" + color).delay(delay + 200, "_fx").dequeue("_fx").promise("_fx").then(function () { next(); playSound(color, delay); activateColor($("#" + color)[0], delay); if (i === colors.length - 1) colorSequenceComplete(); }); }; })).dequeue("_fx");
}
// for any code that needs to be run after sequence is complete
function colorSequenceComplete() { $("#lightemup").prop("disabled", false);
}
![Colors and Sounds - Script Codes](http://shots.codepen.io/skycoder/pen/NjQYNW-512.jpg)
Developer | Sky |
Username | skycoder |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 4,204 Kb |
Views | 2,024 |
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!
Name | Size |
Use the Twitch.tv JSON API | 2,862 Kb |
Show the Local Weather - and a local background image | 8,205 Kb |
JSONP Examples with the Dark Sky API | 5,884 Kb |
Vanilla JS Forismatic Example | 2,284 Kb |
FCC Leaderboard - vanilla JS | 2,546 Kb |
Ionicons | 6,688 Kb |
Random Quote Machine | 2,259 Kb |
Calculator | 4,133 Kb |
Bootstrap 3 Grid Example | 2,111 Kb |
Colors and Sounds | 4,204 Kb |
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!
Name | Username | Size |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Experiment | Toddmoy | 2,849 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Heartbeat | Apetrov | 2,079 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!