-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
114 lines (99 loc) · 4.25 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" name="apple-mobile-web-app-capable" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SecondRateAudioTools</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/github.css">
<script src="js/highlight.pack.js"></script>
<script src="js/inadequateVisualizer.min.js"></script>
<script src="js/tolerableKeyboard.min.js"></script>
<script src="js/substandardSynth.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="main">
<h1>SECOND RATE AUDIO TOOLS</h1>
<div class='explain'>
Web audio api experiments.
Built with a <a href='https://atactionpark.github.io/SubstandardSynth/'>substandard synth</a>, a <a href='https://atactionpark.github.io/TolerableKeyboard/'>tolerable keyboard</a>, a few <a href='https://atactionpark.github.io/InadequateVisualizer/'>inadequate visualizers</a>, a lot of love, and an impeccable taste.
</br>
</br>
</br>
You found something weird or unoptimized? YOU're weird and unoptimized! (but please <a href='https://github.com/AtActionPark/SecondRateAudioTools'>let me know</a>)
</br>
</br>
</br>
(Btw I also built a <a href="https://atactionpark.github.io/PolyrhythmGenerator/">drum polyrhythm generator</a>)
</br>
</br>
</br>
<3<3<3
</div>
<div id='synth'></div>
<div id="keyboard"></div>
<div id="volumeID"></div>
<div id="freqID"></div>
<div id="scopeID"></div>
<h2>SOURCE</h2>
<h3>js</h3>
<pre><code class="js">
//create a common context to be used by the synth, keyboard and visualizers
let context = new AudioContext;
let mixNode = context.createGain();
mixNode.connect(context.destination)
//helper function to create keyboard, and plug it to the synth play/release note
function setUpKeyboard(name,source,div){
name = new TolerableKeyboard({
divID: div,
octaves:5,
width:1200,
showKey:true,
autoSetUp:false,
firstNote:'C1'
})
name.pressNote = function(frequency){
source.playNote(frequency,0)
}
name.releaseNote = function(frequency){
source.stopNote(frequency,0)
}
//we could add some keyBindings like this:
//name.addKeyBinding('Z','F#2')
}
//Helper function to create visualizers and connect them to the mix node
function setUpVisualizers(context,mixNode){
let visualizerVolume = new InadequateVisualizer({context:context,divID:'volumeID',type:'Volume'})
visualizerVolume.connectAndDraw(mixNode)
let visualizerFreq = new InadequateVisualizer({context:context,divID:'freqID',type:'Frequency'})
visualizerFreq.connectAndDraw(mixNode)
let visualizerScope = new InadequateVisualizer({context:context,divID:'scopeID',type:'Oscilloscope'})
visualizerScope.connectAndDraw(mixNode)
}
//Create the synth, then connect the keyboard and visualizers
document.addEventListener('DOMContentLoaded', function(){
// Create a synth with a few basic options
let synth = new SubstandardSynth({
context:context,
outNode:mixNode,
export:true,
pageRoot:'https://atactionpark.github.io/SecondRateAudioTools/',
ID:'synth',
voices:8
});
setUpKeyboard(keyboard,synth,'keyboard');
setUpVisualizers(context,mixNode);
}, false);
</pre></code>
<h3>html</h3>
<pre><code class="html">
<div id='synth'></div>
<div id="keyboard"></div>
<div id="volumeID"></div>
<div id="freqID"></div>
<div id="scopeID"></div>
</pre></code>
</div>
</body>
</html>