Skip to content

Instantly share code, notes, and snippets.

@acidsound

acidsound/index.html

Created February 27, 2019 18:50
Show Gist options
  • Save acidsound/ab52e856d1c46a8f0b92290f94991679 to your computer and use it in GitHub Desktop.
Save acidsound/ab52e856d1c46a8f0b92290f94991679 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/losike
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style id="jsbin-css">
#play {
background-color: lightyellow;
color: silver;
width: 30vw;
height: 30vh;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}
</style>
</head>
<body>
<div id="play">play random note</div>
<script id="jsbin-javascript">
var SynthPad;
SynthPad = (function() {
function SynthPad() {
var e;
try {
this.AudioContext = this.AudioContext || window.webkitAudioContext;
this.context = new this.AudioContext();
} catch (_error) {
e = _error;
alert('Web Audio API is not supported in this browser');
}
console.log('init');
this.oscillator = this.context.createOscillator();
this.gain = this.context.createGain();
this.gain.connect(this.context.destination);
this.oscillator.connect(this.gain);
this.setGain(0);
this.start(0);
}
SynthPad.prototype.setOSCType = function(t) {
return this.oscillator.type = t;
};
SynthPad.prototype.setOSCFreq = function(f) {
return this.oscillator.frequency.value = f;
};
SynthPad.prototype.setGain = function(g) {
return this.gain.gain.value = g;
};
SynthPad.prototype.setDuration = function(l) {
var c;
c = this.context.currentTime;
this.gain.gain.linearRampToValueAtTime(0, c);
this.gain.gain.linearRampToValueAtTime(0.9, c + 0.0001);
return this.gain.gain.linearRampToValueAtTime(0, c + l);
};
SynthPad.prototype.start = function(i) {
return this.oscillator.start(i);
};
SynthPad.prototype.stop = function(i) {
return this.oscillator.stop(i);
};
return SynthPad;
})();
HTMLElement.prototype.onClick = function(func) {
this.addEventListener('mousedown', func);
return this.addEventListener('tapstart', func);
};
document.addEventListener('DOMContentLoaded', function(e) {
var playButton, synth;
synth = new SynthPad;
synth.setOSCType('square');
playButton = document.getElementById('play');
return playButton.onClick(function(e) {
synth.setOSCFreq(400 + Math.random() * 400);
synth.setGain(0.4);
synth.setDuration(0.1);
return e.preventDefault();
});
});
</script>
<script id="jsbin-source-css" type="text/css">#play {
background-color: lightyellow;
color: silver;
width: 30vw;
height: 30vh;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">class SynthPad
constructor: ->
try
@AudioContext = @AudioContext or window.webkitAudioContext
@context = new @AudioContext()
catch e
alert 'Web Audio API is not supported in this browser'
console.log 'init'
@oscillator = @context.createOscillator()
@gain = @context.createGain()
@gain.connect @context.destination
@oscillator.connect @gain
@setGain 0
@start 0
setOSCType: (t)->
@oscillator.type = t
setOSCFreq: (f)->
@oscillator.frequency.value = f
setGain: (g)->
@gain.gain.value = g
setDuration: (l)->
c = @context.currentTime
@gain.gain.linearRampToValueAtTime 0, c
@gain.gain.linearRampToValueAtTime 0.9, c+0.0001
@gain.gain.linearRampToValueAtTime 0, c+l
start: (i)->
@oscillator.start i
stop: (i)->
@oscillator.stop i
HTMLElement::onClick = (func)->
@addEventListener 'mousedown', func
@addEventListener 'tapstart', func
document.addEventListener 'DOMContentLoaded', (e)->
synth = new SynthPad
synth.setOSCType 'square'
playButton = document.getElementById 'play'
playButton.onClick (e)->
synth.setOSCFreq 400+Math.random()*400
synth.setGain 0.4
synth.setDuration 0.1
e.preventDefault()
</script></body>
</html>
Raw
jsbin.losike.css
#play {
background-color: lightyellow;
color: silver;
width: 30vw;
height: 30vh;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}
Raw
jsbin.losike.js
var SynthPad;
SynthPad = (function() {
function SynthPad() {
var e;
try {
this.AudioContext = this.AudioContext || window.webkitAudioContext;
this.context = new this.AudioContext();
} catch (_error) {
e = _error;
alert('Web Audio API is not supported in this browser');
}
console.log('init');
this.oscillator = this.context.createOscillator();
this.gain = this.context.createGain();
this.gain.connect(this.context.destination);
this.oscillator.connect(this.gain);
this.setGain(0);
this.start(0);
}
SynthPad.prototype.setOSCType = function(t) {
return this.oscillator.type = t;
};
SynthPad.prototype.setOSCFreq = function(f) {
return this.oscillator.frequency.value = f;
};
SynthPad.prototype.setGain = function(g) {
return this.gain.gain.value = g;
};
SynthPad.prototype.setDuration = function(l) {
var c;
c = this.context.currentTime;
this.gain.gain.linearRampToValueAtTime(0, c);
this.gain.gain.linearRampToValueAtTime(0.9, c + 0.0001);
return this.gain.gain.linearRampToValueAtTime(0, c + l);
};
SynthPad.prototype.start = function(i) {
return this.oscillator.start(i);
};
SynthPad.prototype.stop = function(i) {
return this.oscillator.stop(i);
};
return SynthPad;
})();
HTMLElement.prototype.onClick = function(func) {
this.addEventListener('mousedown', func);
return this.addEventListener('tapstart', func);
};
document.addEventListener('DOMContentLoaded', function(e) {
var playButton, synth;
synth = new SynthPad;
synth.setOSCType('square');
playButton = document.getElementById('play');
return playButton.onClick(function(e) {
synth.setOSCFreq(400 + Math.random() * 400);
synth.setGain(0.4);
synth.setDuration(0.1);
return e.preventDefault();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment