-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (102 loc) · 3.75 KB
/
index.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<title>noises</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>noises</h1>
<div id="checkboxes" style="display: flex;">
<div class="col" id="col1">
<input type="checkbox" value="440.000" /><br />
<input type="checkbox" value="391.995" /><br />
<input type="checkbox" value="349.228" /><br />
<input type="checkbox" value="329.628" /><br />
<input type="checkbox" value="293.665" /><br />
<input type="checkbox" value="261.626" /><br />
</div>
<div class="col" id="col2">
<input type="checkbox" value="440.000" /><br />
<input type="checkbox" value="391.995" /><br />
<input type="checkbox" value="349.228" /><br />
<input type="checkbox" value="329.628" /><br />
<input type="checkbox" value="293.665" /><br />
<input type="checkbox" value="261.626" /><br />
</div>
<div class="col" id="col3">
<input type="checkbox" value="440.000" /><br />
<input type="checkbox" value="391.995" /><br />
<input type="checkbox" value="349.228" /><br />
<input type="checkbox" value="329.628" /><br />
<input type="checkbox" value="293.665" /><br />
<input type="checkbox" value="261.626" /><br />
</div>
</div>
<p>
<select id="instrument" onchange="changeInstrument(this);">
<option></option>
<option value="Bass">Bass</option>
<option value="Celeste">Celeste</option>
<option value="ChorusStrings">ChorusStrings</option>
<option value="Ethnic33">Ethnic33</option>
<option value="Organ3">Organ3</option>
<option value="Piano">Piano</option>
<option value="Throaty">Throaty</option>
<option value="Wurlitzer">Wurlitzer</option>
</select>
</p>
<script>
"use strict";
var realCoef;
var imagCoef;
var getInstrument = function (name) {
var name = (name === undefined) ? 'Bass' : name;
$.getJSON("https://raw.githubusercontent.com/mohayonao/wave-tables/master/"+name+".json", function(json) {
realCoef = json["real"];
imagCoef = json["imag"];
});
}
// prepare audio thing
var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator;
// count seconds
var sec = 0
setInterval( function(){
sec += 1;
// select one column per second
var colname = "#col"+sec
// highlight the column
$( colname ).effect("highlight", {}, 1000);
// select all the checkboxes that are checked in the column, and iterate over them
$( colname+' input:checked').each(function() {
// select the Hz value for each checkbox
var note = $(this).attr('value')
// create an oscillator to play a sine wave at that Hz frequency
oscillator = context.createOscillator();
//oscillator.type = 'sine';
var real = new Float32Array(realCoef);
var imag = new Float32Array(imagCoef);
var wave = context.createPeriodicWave(real, imag);
oscillator = context.createOscillator();
oscillator.setPeriodicWave(wave);
oscillator.frequency.value = note;
var now = context.currentTime;
oscillator.connect(context.destination);
// play the oscillator for a little while, then stop
oscillator.start();
oscillator.stop(now + 0.7);
});
// after three seconds, start back over with the first column again
if (sec == 3) sec = 0;
}, 1000);
// set up the sounds on page load
getInstrument();
// change the sound when user selects from drop-down
var changeInstrument = function (arg) {
getInstrument(arg.value);
}
</script>
</body>
</html>