-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathindex.html
147 lines (114 loc) · 6.54 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE HTML>
<html>
<title>Web Audio Granular Synthesiser</title>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
<meta property="og:title" content="Multi-Touch Granular Sampler 1.0 by ZYA" />
<meta property="og:site_name" content="ZYA.CC"/>
<meta property="og:url" content="http://www.zya.cc/granular" />
<!-- CSS Libs -->
<link rel="stylesheet" href="libs/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100,400|Open+Sans:400,300,700,600|Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<meta property="og:description" content="Granular synthesis is a method of sound synthesis based on splitting the audio into small pieces and playing them with short intervals.
After loading a sample, you can start creating grains by clicking and holding your mouse on the waveform. The X axis will determine the position and Y axis will change the amplitude of each grain.
This app also has multi-touch support for up to three voices and real-time manipulation of settings.
Tested on: Google Chrome,Firefox, Safari, Chrome iOS (iPad), Safari iOS (iPad)
Libraries used: Web Audio AP, Processing.js, Bootstrap 3,jQuery Knob.
Performance Tip: Try using a quick attack and release as well as low density when using multi-touch for better performance." />
<meta property="og:image" content="http://static.tumblr.com/oczhivm/Kjmmymz3f/granular.jpg" />
<!-- JS Libs -->
<script src="libs/js/jquery-1.10.1.js"></script>
<script src='libs/js/jquery.knob.js'></script>
<script src="libs/js/processing-1.4.1.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
<!-- App -->
<script src="js/gui.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='row hidden-xs' id='header'>
<div id='title' class='col-md-6 col-sm-6 col-xs-6'>Multi-Touch Granular Sampler 1.0 by ZYA</div>
<div id='github' class='col-md-6 col-sm-6 col-xs-6'>Fork me on <a href='http://www.github.com/zya/granular'>GitHub</a></div>
</div>
<!-- waveform row -->
<div class='row ' id='waveform'>
<canvas id='canvas'></canvas>
<canvas id='canvas2'></canvas>
<div id='help'>
<a href="http://www.chromeexperiments.com/detail/granular-synthesiser/" id='badge'><img src="https://www.chromeexperiments.com/img/badges/b4.png" alt="See my Experiment on ChromeExperiments.com" /></a>
<br>
<div class='row .hidden-xs' id='x'><span class='glyphicon glyphicon-arrow-left'></span> x axis - grain position <span class='glyphicon glyphicon-arrow-right'></span><br><br><span class='glyphicon glyphicon-arrow-up'></span><br>y axis - grain amplitude<br> <span class='glyphicon glyphicon-arrow-down'></span> </div>
<div class='row'>
<div class='col-md-3 col-sm-3 col-xs-3'></div>
<div id='drop' class='col-md-6 col-sm-6 col-xs-6 hidden-xs'> <br>drop an audio file here <br><br></div>
<div class='col-md-3 col-sm-3 col-xs-3'></div>
</div><br>
<div class='row'>
<div class='col-md-3 col-sm-3 col-xs-3'></div>
<div id='sample1' class='col-md-3 col-sm-3 col-xs-3 sample'>sample file 1 - guitar</div>
<div id='sample2' class='col-md-3 col-sm-3 col-xs-3 sample'>sample file 2 - synth</div>
<div class='col-md-3 col-sm-3 col-xs-3'></div>
</div><br>
<div class='row hidden-xs' id='description'>
<div class='col-md-3 col-sm-3 col-xs-3'>
</div>
<div class='col-md-6 col-sm-6 col-xs-6'>
<a href='http://en.wikipedia.org/wiki/Granular_synthesis'>Granular synthesis</a> is a method of sound synthesis based on splitting the audio into small pieces and playing them with short intervals.<br>
After loading a sample, you can start creating grains by clicking and holding your mouse on the waveform. The X axis will determine the position and Y axis will change the amplitude of each grain.<br>
This app also has multi-touch support for up to three voices and real-time manupilation of settings.<br><br>
Tested on: Google Chrome,Firefox, Safari, Chrome iOS (iPad), Safari iOS (iPad)<br>
Libraries used: <a href='http://www.w3.org/TR/webaudio/'>Web Audio API</a>, <a href='http://processingjs.org/'>Processing.js</a>, <a href='http://getbootstrap.com/'>Bootstrap 3</a>, <a href='http://anthonyterrien.com/knob/'>jQuery Knob</a>
<br>Performance Tip: Try using a quick attack and release as well as low density when using multi-touch for better performance.
</div>
<div class='col-md-3 col-sm-3 col-xs-3'>
</div>
</div>
</div>
</div>
<!-- controls row -->
<div class='row' id='controls' >
<div class='col-md-2 col-sm-2 col-xs-2'>
<div class='label hidden-xs'>attack</div><br><br>
<input type="text" class="dial" id='attack' data-min='0' data-max='100' value='40'><br><br>
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<div class='label hidden-xs'>release</div><br><br>
<input type="text" class="dial" id='release' data-min='0' data-max='100' value='40'>
</div>
<div class='col-md-2 col-sm-2 col-xs-2' >
<div class='label hidden-xs'>density</div><br><br>
<input type="text" class="dial" id='density' data-min='0' data-max='100' value='85'>
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<div class='label hidden-xs'>spread</div><br><br>
<input type="text" class="dial" id='spread' data-min='0' data-max='100' value='20'>
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<div class='label hidden-xs' >pan</div><br><br>
<input type="text" class="dial" id='pan' data-min='0' data-max='100' value='20'>
</div>
<div class='col-md-2 col-sm-2 col-xs-2 hidden-xs' >
<div class='label hidden-xs'>transpose</div><br><br>
<div id='transpose'>
<button id='minus' class='btn'>
-12
</button>
<button id='plus' class='btn'>
+12
</button><br><br>
<span class="glyphicon glyphicon-question-sign" id='helpbutton'></span>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45115441-1', 'zya.cc');
ga('send', 'pageview');
</script>
</body>
</html>