Colors and Sounds

Developer
Sky
Size
4,204 Kb
Views
2,024
  1. Colors and Sounds Previews
  2. Colors and Sounds HTML Codes
  3. Colors and Sounds CSS Codes
  4. Colors and Sounds JS Codes

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 Previews
IQ Test

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
Colors and Sounds - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 4,204 Kb
Views 2,024
Do you need developer help for Colors and Sounds?

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!

Sky (skycoder) Script Codes
Name
Wikipedia Viewer
JSONP Examples with the Dark Sky API
Search box that submits when you hit Enter
A Pen by Sky
Portfolio - Work In Progress
Ionicons
Random Quote Machine
Show the Local Weather - and a local background image
FCC Leaderboard - vanilla JS
Bootstrap 3 Grid Example
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!