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 |
Portfolio - Work In Progress | 4,572 Kb |
Dark Sky - Simple 5-day Forecast | 4,941 Kb |
Show the Local Weather - and a local background image | 8,205 Kb |
A Pen by Sky | 4,531 Kb |
JSONP Examples with the Dark Sky API | 5,884 Kb |
Random Quote Machine | 2,259 Kb |
Use the Twitch.tv JSON API | 2,862 Kb |
FCC Leaderboard - vanilla JS | 2,546 Kb |
Search box that submits when you hit Enter | 2,459 Kb |
Bootstrap 3 Grid Example | 2,111 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 |
Button Option Group | Honchoman | 1,859 Kb |
Responsive slide | Thorien | 2,400 Kb |
Cake | Kennyname | 7,220 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Sass Radar | Jlong | 6,887 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 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!