{showFrequencySlider && (
@@ -221,6 +246,23 @@ export function PitchSlider({
))}
+ {claviature && (
+
{
+ const f = 440 * 2 ** ((note - 69) / 12);
+ handleChangeFrequency(f);
+ cancelAnimationFrame(frameRef.current);
+ startOsc(f);
+ }}
+ options={{
+ range: ['A1', 'A5'],
+ scaleY: 0.75,
+ scaleX: 0.86,
+ colorize: activeNote ? [{ keys: [activeNote], color: '#eab308' }] : [],
+ labels: activeNote ? { [activeNote]: activeNote } : {},
+ }}
+ />
+ )}
);
}
diff --git a/website/src/pages/understand/pitch.mdx b/website/src/pages/understand/pitch.mdx
index 041f45e5..aa812750 100644
--- a/website/src/pages/understand/pitch.mdx
+++ b/website/src/pages/understand/pitch.mdx
@@ -5,6 +5,7 @@ layout: ../../layouts/MainLayout.astro
import { MiniRepl } from '../../docs/MiniRepl';
import { PitchSlider } from '../../components/PitchSlider';
+import Box from '@components/Box.astro';
# Understanding Pitch
@@ -12,11 +13,12 @@ Let's learn how pitch works! The slider below controls the Caution: The higher frequencies could be disturbing for children or animals!
The Hz number is the frequency of the pitch you're hearing.
The higher the frequency, the higher the pitch and vice versa.
@@ -24,6 +26,17 @@ A pitch occurs whenever something is vibrating / oscillating at a frequency, in
The unit **Hz** describes how many times that oscillation happens per second.
Our eyes are too slow to actually see the oscillation on the speaker, but we can [see it in slow motion](https://www.youtube.com/watch?v=CDMBWw7OuJQ&t=5s).
+
+
+The hearing range of a newborn is said to be between 20Hz and 20000Hz.
+The upper limit decreases with age. What's your upper limit?
+
+
+
+In Strudel, we can play frequencies directly with the `freq` control:
+
+]")`} />
+
## Frequency vs Pitch Perception
Maybe you have already noticed that the frequency slider is "lopsided",
@@ -38,11 +51,15 @@ Try out the buttons above to sweep through the frequency range in 2 different wa
- Frequency Sweep: frequency rises linear , pitch rises logarithmic
- Pitch Sweep: frequency rises exponential , pitch rises linear
+
+
Don't be scared of these mathematical terms:
- "logarithmic" is just a fancy way of saying "it starts fast and slows down"
- "exponential" is just a fancy way of saying "it starts slow and gets faster"
+
+
Most of the time, we might want to control pitch in a way that matches our perception,
which is what the pitch slider does.
@@ -56,18 +73,97 @@ To approach that unit of pitch, let's look at how frequency behaves when it is d
- Use the now stepped pitch slider above
- Can you hear how these pitches seem related to each other?
-In mathematical terms, the frequency of button `n` would be `50Hz * 2^n` (n starting from 0).
-We could already use that `n` as a pitch unit! So a value of 0 would relate to a certain base frequency (50Hz),
-and each whole number step would be an additional doubling of 2.
+
In musical terms, a pitch with double the frequency of another is an `octave` higher.
-Because octaves are pretty far apart, octaves are typically divided into 12 equal parts:
+
+
+Because octaves are pretty far apart, octaves are typically divided into 12 smaller parts:
+This step is also called a semitone, which is the most common division of pitched music.
+For example, the keys on a piano keyboard are also divided into semitones.
+
+In Strudel, we could do that with `freq` like this:
+
+ 440 * 2**(n/12))
+).piano()`}
+/>
+
+Of course, this can be written shorter with note, as we will see below.
+
+## From Semitones to MIDI numbers
+
+Now we know what the distance of a semitone is.
+Above, we used an arbitrary base frequency of 440Hz, which means the exponent 0 is equal to 440Hz.
+Typically, 440Hz is standardized to the number 69, which leads to this calculation:
+
+
+
+The yellow number is now a MIDI number, covering more than the whole human hearing range with numbers from 0 to 127.
+In Strudel, we can use MIDI numbers inside `note`:
+
+
+
+## From MIDI numbers to notes
+
+In western music theory, notes are used instead of numbers.
+For each midi number, there is at least one note label:
+
+
+
+A full note label consists of a letter (A-G), 0 or more accidentals (b | #) and an octave number.
+This system is also known as [Scientific Pitch Notation](https://en.wikipedia.org/wiki/Scientific_pitch_notation).
+In Strudel, these note labels can also be used inside `note` as an alternative to midi numbers:
+
+
+
+## Open Questions
+
+Now that we have learned about different representations of pitch, there are still open questions:
+
+- Why 12 notes? What about different divisions of the octave?
+- Why are notes labeled as they are? Why only 7 letters?
+- Are there other labeling systems?
+- What about Just Intonation Systems?
+- What about Timbre?
+
+All those questions are important to ask and will be answered in another article.
+
## Definition
-From [wikipedia](): "Pitch is a perceptual property of sounds that allows their ordering on a frequency-related scale,[1] or more commonly, pitch is the quality that makes it possible to judge sounds as "higher" and "lower" in the sense associated with musical melodies."
+At first, I wanted to start this article with a definition, but then thought it might be a good idea to focus on intuitive exploration.
+Maybe you now understand this definition much better:
-The oscillation is just a pattern of movement that repeats over and over again.
+
+
+From [wikipedia](): "Pitch is a perceptual property of sounds that allows their ordering on a frequency-related scale, or more commonly, pitch is the quality that makes it possible to judge sounds as "higher" and "lower" in the sense associated with musical melodies."
+
+