/
index.html
317 lines (317 loc) · 10.8 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cloud-music</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
svg {
height: auto;
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cloud-music</h1>
</header>
<style>
body {
margin: 2em;
padding-right: 1em;
padding-left: 1em;
max-width: 7in;
color: black;
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
line-height: 140%;
background: whitesmoke;
}
p, ul, li {
font-family: Georgia, Garamond, serif;
}
</style>
<script>
if ('caches' in window) {
caches.keys().then(function(names) {
for (let name of names)
caches.delete(name);
console.log(`deleted ${name} from caches.`);
});
}
</script>
<h1 id="cloud-music">cloud-music</h1>
<h2 id="computer-music-in-the-cloud-by-michael-gogins">Computer music in
the cloud by Michael Gogins</h2>
<p><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0"
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />This
work is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative
Commons Attribution-NonCommercial-ShareAlike 4.0 International
License</a>.</p>
<p>This is real music. But it is not a streaming recording. It is not
performed in a concert. These pieces are Web pages that are loaded from
my Web server and run in your browser – in <em>any</em> standard Web
browser, including mobile devices (at least, if they are powerful
enough).</p>
<p>Each piece will play indefinitely. There may or may not be animated
visuals along with the music. The listener may or may not be able to
customize the piece – perhaps quite a bit, amounting to a new piece,
co-composed with me.</p>
<p>The underlying technology is my WebAssembly build of Csound with
CsoundAC. Some pieces use third party libraries, especially <a
href="https://github.com/tidalcycles/strudel">Strudel</a>, a JavaScript
port of the live coding system <a href="https://tidalcycles.org/">Tidal
Cycles</a>.</p>
<ul>
<li><p>A <a href="player.html">Csound Player</a> that will play, and let
you edit, any Csound piece that you paste into the text area.</p></li>
<li><p><a href="message.html">Message from Another Planet</a>, a Csound
piece with a basic HTML user interface.</p></li>
<li><p><a href="strudel_repl.html">Strudel REPL</a>, exactly the same as
the main Strudel Web site.</p></li>
<li><p><a href="trichord_space.cloud5.html">Trichord Space</a>, an
interactive piece that displays Dmitri Tymoczko’s chord space for
trichords, with the ability to perform, hear, and visualize various
operations on the chords in the space.</p></li>
<li><p><a href="scrims.html">Scrims</a>, a JavaScript piece that samples
an animated WebGL hopalong fractal to obtain notes that are then
harmonized using CsoundAC’s chord space operations.</p></li>
</ul>
<p>For more information on the following pieces, read the <em>About</em>
page in the piece itself.</p>
<ul>
<li><p><a href="cloud_music_no_1.html">Cloud Music No. 1</a>.</p></li>
<li><p><a href="cloud_music_no_2.html">Cloud Music No. 2</a>.</p></li>
<li><p><a href="cloud_music_no_3.html">Cloud Music No. 3</a>.</p></li>
<li><p><a href="cloud_music_no_4.html">Cloud Music No. 4</a>.</p></li>
<li><p><a href="cloud_music_no_6.html">Cloud Music No. 6</a>.</p></li>
<li><p><a href="cloud_music_no_8.html">Cloud Music No. 8</a>.</p></li>
<li><p><a href="cloud_music_no_9.html">Cloud Music No. 9</a>.</p></li>
<li><p><a href="cloud_music_no_13.html">Cloud Music No. 13</a>.</p></li>
<li><p><a href="cloud_music_no_14.html">Cloud Music No. 14</a>. This one
has a button so the user can record a performance and download the
resulting soundfile.</p></li>
<li><p><a href="cancycle.html">Cancycle</a>, a piece for live
coding.</p></li>
</ul>
<h3 id="experiments">Experiments</h3>
<p>I am working on supporting the use of CsoundAC in the Strudel REPL.
The most important thing is to import the <code>csoundac.mjs</code>
module in your Strudel patch. To see how this is done, look at the
following pieces. At the present time, these are also the unit tests fr
<code>csoundac.mjs</code>. Comments and suggestions are wecome.</p>
<ul>
<li><a href="ac_example_1.html">CsoundAC Example 1</a>.</li>
</ul>
<h2
id="cloud-music-as-a-studio-andor-development-environment">cloud-music
as a Studio and/or Development Environment</h2>
<p>I have designed this repository not only to present some of my
compositions, but also to serve as a development environment/computer
music studio for working with Csound, algorithmic composition, and live
coding in a <em>completely platform-independent way</em>.</p>
<p>All software used here is JavaScript, WebAssembly, or HTML. All third
party dependencies are contained in this repository as static files.</p>
<p>To use cloud-music, fork cloud-music on GitHub and clone your fork on
your own computer. You can also just download the latest cloud-music
release as a zip file and unzip it on your computer.</p>
<p><em>This is actually the easiest way to install a usable version of
Csound on your computer.</em></p>
<h3 id="writing-new-compositions">Writing New Compositions</h3>
<p>There is no need to build or configure anything. In a terminal,
simply change to your cloud-music directory and run
<code>python3 -m http.server</code>. Then you can use your Web browser
to go to <code>http://localhost:8000</code>, where you can view and run
any of these compositions in your browser.</p>
<p>To create a new composition, simply create a new HTML file. You can
copy one of my existing pieces as a template and modify it, or you can
create a new HTML file from scratch.</p>
<p><strong><strong>Important note!</strong></strong> If you are simply
using cloud-music to write pieces, write them in the <code>dist</code>
directory. However, if you are going to build cloud-music yourself, for
example to keep up with new releases of Strudel, then write your pieces
in the <code>public</code> directory, and build cloud-music.</p>
<p>Although cloud-music renders audio only in real time, it is easy to
use an audio loopback driver to route audio from the system output to an
audio recorder and save the recording as a soundfile. On my MacBook Pro,
I have been able to use <a
href="https://github.com/ExistentialAudio/BlackHole">BlackHole</a> to
route audio from cloud-music pices to <a
href="https://www.audacityteam.org/">Audacity</a>.</p>
<h3 id="writing-new-software">Writing New Software</h3>
<p>Because algorithmic compositions are generally also software, the
line between compositions and other software can become blurred.
However, it is often the case that a composer will write new software as
libraries or other resources to support a number of their musical
compositions.</p>
<p>To develop this kind of software in your fork of cloud-music, keep in
mind that the cloud-music project uses <a
href="https://www.npmjs.com/">pnpm</a>, which of course must first be
installed.</p>
<p>If you just want to work in the context of a Web site created in your
fork of cloud-music, then just writing static code in the
<code>public</code> directory would be fine, and by far the easiest.</p>
<p>Otherwise, take a look at <a
href="https://github.com/gogins/cloud-music/blob/main/README.md">README.md</a>
and at the build system files such as <code>package.json</code>.</p>
</body>
</html>