1---
2title: Erste Töne
3layout: ../../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '@src/docs/MiniRepl';
7import { midi2note } from '@strudel/core/';
8import Box from '@components/Box.astro';
9import QA from '@components/QA';
10
11# Erste Töne
12
13Jetzt schauen wir uns an wie man mit Tönen mit der `note` Funktion spielt.
14
15## Zahlen und Noten
16
17**Töne mit Zahlen**
18
19<MiniRepl
20  client:visible
21  tune={`note("48 52 55 59").sound("piano")`}
22  claviature
23  claviatureLabels={Object.fromEntries(
24    Array(49)
25      .fill()
26      .map((_, i) => [midi2note(i + 36), i + 36]),
27  )}
28/>
29
30<Box>
31
32Probiere verschiedene Zahlen aus!
33
34Versuch auch mal Kommazahlen, z.B. 55.5 (beachte die englische Schreibweise von Kommazahlen mit "." anstatt ",")
35
36</Box>
37
38**Töne mit Buchstaben**
39
40<MiniRepl
41  client:visible
42  tune={`note("c e g b").sound("piano")`}
43  claviature
44  claviatureLabels={Object.fromEntries(['c3', 'd3', 'e3', 'f3', 'g3', 'a3', 'b3'].map((n) => [n, n.split('')[0]]))}
45/>
46
47<Box>
48
49Versuch verschiedene Buchstaben aus (a - g).
50
51Findest du Melodien die auch gleichzeitig ein Wort sind? Tipp: ☕ 🙈 🧚
52
53</Box>
54
55**Vorzeichen**
56
57<MiniRepl
58  client:visible
59  tune={`note("db eb gb ab bb").sound("piano")`}
60  claviature
61  claviatureLabels={Object.fromEntries(
62    ['db3', 'eb3', 'gb3', 'ab3', 'bb3'].map((n) => [n, n.split('').slice(0, 2).join('')]),
63  )}
64/>
65
66<MiniRepl
67  client:visible
68  tune={`note("c# d# f# g# a#").sound("piano")`}
69  claviature
70  claviatureLabels={Object.fromEntries(
71    ['c#3', 'd#3', 'f#3', 'g#3', 'a#3'].map((n) => [n, n.split('').slice(0, 2).join('')]),
72  )}
73/>
74
75**Andere Oktaven**
76
77<MiniRepl
78  client:visible
79  tune={`note("c2 e3 g4 b5").sound("piano")`}
80  claviature
81  claviatureLabels={Object.fromEntries(['c1', 'c2', 'c3', 'c4', 'c5'].map((n) => [n, n]))}
82  claviatureLabels={Object.fromEntries(
83    Array(49)
84      .fill()
85      .map((_, i) => [midi2note(i + 36), midi2note(i + 36)]),
86  )}
87/>
88
89<Box>
90
91Probiere verschiedene Oktaven aus (1-8)
92
93</Box>
94
95Normalerweise kommen Leute die keine Noten besser mit Zahlen anstatt mit Buchstaben zurecht.
96Daher benutzen die folgenden Beispiele meistens Zahlen.
97Später sehen wir auch noch ein paar Tricks die es uns erleichtern Töne zu spielen die zueinander passen.
98
99## Den Sound verändern
100
101Genau wie bei geräuschhaften Sounds können wir den Klang unserer Töne mit `sound` verändern:
102
103<MiniRepl client:visible tune={`note("36 43, 52 59 62 64").sound("piano")`} />
104
105<Box>
106
107Probier ein paar sounds aus:
108
109- gm_electric_guitar_muted - E-Gitarre
110- gm_acoustic_bass - Kontrabass
111- gm_voice_oohs - Chords
112- gm_blown_bottle - Flasche
113- sawtooth - Sägezahn-Welle
114- square - Rechteck-Welle
115- triangle - Dreieck-Welle
116- Was ist mit bd, sd oder hh?
117- Entferne `.sound('...')` komplett
118
119</Box>
120
121**Zwischen Sounds hin und her wechseln**
122
123<MiniRepl
124  client:visible
125  tune={`note("48 67 63 [62, 58]")
126.sound("piano gm_electric_guitar_muted")`}
127/>
128
129**Gleichzeitige Sounds**
130
131<MiniRepl
132  client:visible
133  tune={`note("48 67 63 [62, 58]")
134.sound("piano, gm_electric_guitar_muted")`}
135/>
136
137<Box>
138
139Die patterns in `note` und `sound` werden kombiniert!
140
141Wir schauen uns später noch mehr Möglichkeiten an wie man patterns kombiniert.
142
143</Box>
144
145## Längere Sequenzen
146
147**Sequenzen verlangsamen mit `/`**
148
149<MiniRepl client:visible tune={`note("[36 34 41 39]/4").sound("gm_acoustic_bass")`} punchcard />
150
151<Box>
152
153Das `/4` spielt die Sequenz 4 mal so langsam, also insgesamt 4 cycles = 8s.
154
155Jede Note ist nun also 2s lang.
156
157Schreib noch mehr Töne in die Klammern und achte darauf dass es schneller wird.
158
159</Box>
160
161Wenn eine Sequenz unabhängig von ihrem Inhalt immer gleich schnell bleiben soll, gibt es noch eine andere Art Klammern:
162
163**Eins pro Cycle per \< \>**
164
165Im letzten Kapitel haben wir schon gelernt dass `< ... >` (angle brackets) nur ein Element pro Cycle spielt.
166Das ist für Melodien auch sehr nützlich:
167
168<MiniRepl client:visible tune={`note("<36 34 41 39>").sound("gm_acoustic_bass")`} punchcard />
169
170<Box>
171
172Füg noch mehr Töne hinzu und achte darauf wie das Tempo gleich bleibt!
173
174Tatsächlich sind diese Klammern nur eine Abkürzung:
175
176`<a b c>` = `[a b c]/3`
177
178`<a b c d>` = `[a b c d]/4`
179
180usw..
181
182</Box>
183
184**Eine Sequenz pro Cycle**
185
186<MiniRepl
187  client:visible
188  tune={`note("<[36 48] [34 46] [41 53] [39 51]>")
189.sound("gm_acoustic_bass")`}
190  punchcard
191/>
192
193oder auch...
194
195<MiniRepl
196  client:visible
197  tune={`note("<[36 48]*4 [34 46]*4 [41 53]*4 [39 51]*4>/2")
198.sound("gm_acoustic_bass")`}
199  punchcard
200/>
201
202**Alternativen**
203
204Ähnlich wie Unter-Sequenzen, kann auch `<...>` innerhalb einer Sequenz verwendet werden:
205
206<MiniRepl
207  client:visible
208  tune={`note("60 <63 62 65 63>")
209.sound("gm_xylophone")`}
210  punchcard
211/>
212
213Das ist auch praktisch für atonale Sounds:
214
215<MiniRepl
216  client:visible
217  tune={`sound("bd*2, ~ <sd cp>, [~ hh]*2")
218.bank("RolandTR909")`}
219  punchcard
220/>
221
222## Skalen
223
224Es kann mühsam sein die richtigen Noten zu finden wenn man alle zur Verfügung hat.
225Mit Skalen ist das einfacher:
226
227<MiniRepl
228  client:visible
229  tune={`n("0 2 4 <[6,8] [7,9]>")
230.scale("C:minor").sound("piano")`}
231  punchcard
232/>
233
234<Box>
235
236Probier verschiedene Zahlen aus. Jede klingt gut!
237
238Probier verschiedene Skalen:
239
240- C:major
241- A2:minor
242- D:dorian
243- G:mixolydian
244- A2:minor:pentatonic
245- F:major:pentatonic
246
247</Box>
248
249**Automatisierte Skalen**
250
251Wie alle Funktionen können auch Skalen mit einem Pattern automatisiert werden:
252
253<MiniRepl
254  client:visible
255  tune={`n("<0 -3>, 2 4 <[6,8] [7,9]>")
256.scale("<C:major D:mixolydian>/4")
257.sound("piano")`}
258  punchcard
259/>
260
261<Box>
262
263Wenn du keine Ahnung hast was die Skalen bedeuten, keine Sorge.
264Es sind einfach nur Namen für verschiedene Gruppen von Tönen die gut zusammenpassen.
265
266Nimm dir Zeit um herauszufinden welche Skalen du magst.
267
268</Box>
269
270## Wiederholen und Verlängern
271
272**Verlängern mit @**
273
274<MiniRepl client:visible tune={`note("c@3 eb").sound("gm_acoustic_bass")`} punchcard />
275
276<Box>
277
278Ein Element ohne `@` ist gleichbedeutend mit `@1`. Im Beispiel ist `c` drei Einheiten lang, `eb` nur eine.
279
280Spiel mit der Länge!
281
282</Box>
283
284**Unter-Sequenzen verlängern**
285
286<MiniRepl
287  client:visible
288  tune={`n("<[4@2 4] [5@2 5] [6@2 6] [5@2 5]>*2")
289.scale("<C2:mixolydian F2:mixolydian>/4")
290.sound("gm_acoustic_bass")`}
291  punchcard
292/>
293
294<Box>
295
296Dieser Groove wird auch `shuffle` genannt.
297Jeder Schlag enthält 2 Töne, wobei der erste doppelt so lang wie der zweite ist.
298Das nennt man auch manchmal `triolen swing`. Es ist ein typischer Rhythmus im Blues und Jazz.
299
300</Box>
301
302**Wiederholen**
303
304<MiniRepl client:visible tune={`note("c!2 [eb,<g a bb a>]").sound("piano")`} punchcard />
305
306<Box>
307
308Wechsel zwischen `!`, `*` und `@` hin und her.
309
310Was ist der Unterschied?
311
312</Box>
313
314## Rückblick
315
316Das haben wir in diesem Kapitel gelernt:
317
318| Concept      | Syntax | Example                                                  |
319| ------------ | ------ | -------------------------------------------------------- |
320| Verlangsamen | \/     | <MiniRepl client:visible tune={`note("[c a f e]/2")`} /> |
321| Alternativen | \<\>   | <MiniRepl client:visible tune={`note("c <e g>")`} />     |
322| Verlängern   | @      | <MiniRepl client:visible tune={`note("c@3 e")`} />       |
323| Wiederholen  | !      | <MiniRepl client:visible tune={`note("c!3 e")`} />       |
324
325Neue Funktionen:
326
327| Name  | Description                             | Example                                                                           |
328| ----- | --------------------------------------- | --------------------------------------------------------------------------------- |
329| note  | Tonhöhe als Buchstabe oder Zahl         | <MiniRepl client:visible tune={`note("b g e c").sound("piano")`} />               |
330| scale | Interpretiert `n` als Skalenstufe       | <MiniRepl client:visible tune={`n("6 4 2 0").scale("C:minor").sound("piano")`} /> |
331| stack | Spiele mehrere Patterns parallel (s.u.) | <MiniRepl client:visible tune={`stack(s("bd sd"),note("c eb g"))`} />             |
332
333## Beispiele
334
335**Bassline**
336
337<MiniRepl
338  client:visible
339  tune={`note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
340.sound("gm_synth_bass_1")
341.lpf(800) // <-- we'll learn about this soon`}
342/>
343
344**Melodie**
345
346<MiniRepl
347  client:visible
348  tune={`n(\`<
349[~ 0] 2 [0 2] [~ 2]
350[~ 0] 1 [0 1] [~ 1]
351[~ 0] 3 [0 3] [~ 3]
352[~ 0] 2 [0 2] [~ 2]
353>*2\`).scale("C4:minor")
354.sound("gm_synth_strings_1")`}
355/>
356
357**Drums**
358
359<MiniRepl
360  client:visible
361  tune={`sound("bd*2, ~ <sd cp>, [~ hh]*2")
362.bank("RolandTR909")`}
363/>
364
365**Wenn es doch nur einen Weg gäbe das alles gleichzeitig zu spielen.......**
366
367<Box>
368
369Das geht mit `stack` 😙
370
371</Box>
372
373<MiniRepl
374  client:visible
375  tune={`stack(
376  note("<[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2")
377  .sound("gm_synth_bass_1").lpf(800),
378  n(\`<
379  [~ 0] 2 [0 2] [~ 2]
380  [~ 0] 1 [0 1] [~ 1]
381  [~ 0] 3 [0 3] [~ 3]
382  [~ 0] 2 [0 2] [~ 2]
383  >*2\`).scale("C4:minor")
384  .sound("gm_synth_strings_1"),
385  sound("bd*2, ~ <sd cp>, [~ hh]*2")
386  .bank("RolandTR909")
387)`}
388/>
389
390Das hört sich doch langsam nach echter Musik an!
391Wir haben Sounds, wir haben Töne.. noch ein Puzzleteil fehlt: [Effekte](/de/workshop/first-effects)