-
Notifications
You must be signed in to change notification settings - Fork 1
/
simple.html
99 lines (93 loc) · 3.99 KB
/
simple.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- created by Piers Titus van der Torren, 2010 - http://www.toverlamp.org/static/wickisynth/ -->
<title>Simple use example of Wicki keyboard and Karplus-Strong synthesizer JavaScript classes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="keyboard.js"></script>
<script src="karplusstrong.js"></script>
<script>
// load the synthesizer
var AudioContext = window.AudioContext || window.webkitAudioContext; // cross browser compatible
var context = new AudioContext();
var synthesizer = new KSPlayer(context);
synthesizer.start();
// load the keyboard
var keyBoard
function loadKeyboard()
{
keyboard = new Keyboard(this, function(event){
synthesizer.play(event.keyId, event.hz, event.volume);
}, function(event){
synthesizer.stop(event.keyId);
}, function(event){synthesizer.setSustain(event);});
}
</script>
<script>
// simple sequencer
function playString( noteString, rate )
{
var start = new Date().getTime();
var time = 0;
var notes = {"A":-12,"B":-10,"C":-9,"D":-7,"E":-5,"F":-4,"G":-2,"a":0,"b":2,"c":3,"d":5,"e":7,"f":8,"g":10};
var octave = -1;
var sharp = 0;
for (var n in noteString)
{
var note = noteString[n];
switch(note)
{
case " ":
time += rate;
break;
case "+":
octave++;
break;
case "-":
octave--;
break;
case "#":
sharp++;
break;
default:
var volume = 1;
if (note > "Z") { volume = .5; }
note = note.toLowerCase();
var freq = 440*Math.pow(2,(notes[note] + sharp)/12 + octave);
var starttime = time - (start - new Date().getTime());
setTimeout("synthesizer.play('"+note+sharp+octave+"',"+freq+","+volume+")", starttime);
setTimeout("synthesizer.stop('"+note+sharp+octave+"')", starttime+2000);
sharp = 0;
}
}
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20429508-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<p>This page shows a simple setup to use karplusstrong.js and keyboard.js, for the original tuning exploration app see <a href="wickisynth.html">wickisynth.html</a>
</p>
<p>
You can enter a tune in the textbox, and press play to play it. [a-g] for notes, # increases next note with a half, spaces represent time (so notes without spaces inbetween are played as chord), + and - shift an octave. Use uppercase for more volume. <br/>
<input type="text" name="noteinput" id="noteinput" value="-d #d e +C -e +C -e +C c d #d e c d e b d c -d #d e +C -e +C -e +C a -g #F +a c E d c a d-f +ce df #d#f EG f+a- eg ce df #d#f EG f+a- eg e c -g +a b c d e d c d C" style="width: 100%"/><br/>
<!-- c d e c c d e c e f g e f g g a g f e c g a g f e c c G c c G c -->
tempo: <input type="text" name="rateinput" id="rateinput" value="300" style="width: 3em"/> spaces/min
<input type="button" value="Play" onClick="playString(document.getElementById('noteinput').value, 60000/parseFloat(document.getElementById('rateinput').value));"/>
</p>
<p>
<input type="button" value="grab keyboard" onClick="loadKeyboard();"/>
You can play on your keyboard using the Wicki button layout. You can press multiple keys and hold keys to sustain them. Further keys:<br/> + = octave up<br/> - = octave down<br/> space = toggle sustain pedal</p>
</body>
</html>