<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>
@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;
}
// 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();
}
});
Also see: Tab Triggers