<form id="demo">
<input type="text" pattern="[.\- ]+" name="code" value="-.-. --... ... -.- -.--" >
<button>Play</button>
</form>
var AudioContext = window.AudioContext || window.webkitAudioContext;
var ctx = new AudioContext();
var dot = 1.2 / 15;
document.getElementById("demo").onsubmit = function() {
var t = ctx.currentTime;
var oscillator = ctx.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 600;
var gainNode = ctx.createGain();
gainNode.gain.setValueAtTime(0, t);
this.code.value.split("").forEach(function(letter) {
switch(letter) {
case ".":
gainNode.gain.setValueAtTime(1, t);
t += dot;
gainNode.gain.setValueAtTime(0, t);
t += dot;
break;
case "-":
gainNode.gain.setValueAtTime(1, t);
t += 3 * dot;
gainNode.gain.setValueAtTime(0, t);
t += dot;
break;
case " ":
t += 7 * dot;
break;
}
});
oscillator.connect(gainNode);
gainNode.connect(ctx.destination);
oscillator.start();
return false;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.