NASA Quindar tones in Web Audio

Developer
Ed Ball
Size
2,787 Kb
Views
16,192
  1. NASA Quindar tones in Web Audio Previews
  2. NASA Quindar tones in Web Audio HTML Codes
  3. NASA Quindar tones in Web Audio CSS Codes
  4. NASA Quindar tones in Web Audio JS Codes

How do I make an nasa quindar tones in web audio?

An accompanying blog post will soon be on http://outputchannel.com. This is a web audio recreation of the Quindar tones used in the NASA Apollo missions. When mission control wanted to send a message to the astronauts they would push and hold a button which sent a 2525Hz beep to switch on the transmitters. When they wanted to end the message, they would release the button, and that would send a slightly lower beep at 2475Hz which would switch off the transmitters.. What is a nasa quindar tones in web audio? How do you make a nasa quindar tones in web audio? This script and codes were developed by Ed Ball on 12 November 2022, Saturday.

NASA Quindar tones in Web Audio Previews
IQ Test

NASA Quindar tones in Web Audio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>NASA Quindar tones in Web Audio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <p>Click and hold the button. At the start you'll hear the intro beep, and when you release the mouse you'll hear the outro beep.</p> <div class='button' id='js-quindar-button'>Quindar Toggle</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

NASA Quindar tones in Web Audio - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Karla:400);
body{ background: #f8f8f8; font-family:Karla, sans-serif;
}
.wrapper{	width:400px;	height:200px;	position:absolute;	left:50%;	top:50%;	margin:-100px 0 0 -200px; text-align:center;
}
.wrapper p { max-width:320px; margin: 10px auto;
}
.button{ font-size: 24px; border: solid 1px #333; width:200px; border-radius:3px; padding:15px; transition: all 0.5s; margin:0 auto 40px;
}
.button:hover{ color: #55D43F; border-color:#55D43F; transition-duration:0s; cursor:pointer;
}
.button:active{ color: #3CD9FD; border-color:#3CD9FD;
}

NASA Quindar tones in Web Audio - Script Codes JS Codes

// polyfill
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
function Quindar(context) {	this.context = context;	this.broadcastStatus = 0;	this.introFreq = 2525;	this.outroFreq = 2475;
}
Quindar.prototype.setup = function(){	this.osc = context.createOscillator();	this.gainNode = this.context.createGain();	this.gainNode.gain.value = 0.2;	this.osc.connect(this.gainNode);	this.gainNode.connect(context.destination);
}
Quindar.prototype.playSound = function(frequency){ this.setup(); this.osc.frequency.value = frequency;	this.osc.start(0); this.osc.stop(this.context.currentTime + 0.25);
}
Quindar.prototype.beginBroadcast = function(){ this.playSound(this.introFreq);	this.broadcastStatus = 1;
}
Quindar.prototype.endBroadcast = function(){ this.playSound(this.outroFreq);	this.broadcastStatus = 0;
}
var context = new AudioContext();
// Create a new Tone instace.
var quindar = new Quindar(context);
$("#js-quindar-button").on("mousedown touchstart", function(e){	e.preventDefault();	if (quindar.broadcastStatus == 0){	quindar.beginBroadcast();	}
});
// we detect the mouseup event on the window tag as opposed to the button
// because otherwise if we release the mouse when not over the button,
// the tone will remain playing
$(window).on("mouseup touchend", function(){	if (typeof quindar !== "undefined" && quindar.broadcastStatus == 1){	quindar.endBroadcast();	}
});
NASA Quindar tones in Web Audio - Script Codes
NASA Quindar tones in Web Audio - Script Codes
Home Page Home
Developer Ed Ball
Username edball
Uploaded November 12, 2022
Rating 3
Size 2,787 Kb
Views 16,192
Do you need developer help for NASA Quindar tones in Web Audio?

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!

Ed Ball (edball) Script Codes
Name
Planetary Gear System
Alphabet Monogram with SCSS and SVG
Night Vision Goggles Sound
Stylibrary
Purple Rain
Web Audio TR-808 electronic cowbell
Canvas compositing methods
Ringback tone in Web Audio
Floating Helicopter
Chues
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!