From d5cd91a4f504b3d0eaf3e2dd098544c8c2e59fc8 Mon Sep 17 00:00:00 2001 From: Michal Sek Date: Tue, 17 Dec 2024 21:28:22 +0100 Subject: [PATCH] feat: first? iteration of the piano tutorial --- .../fundamentals/lets-make-some-noise.mdx | 14 + .../fundamentals/making-a-piano-keyboard.mdx | 362 +++++++++++++++ packages/audiodocs/docusaurus.config.js | 1 + packages/audiodocs/package.json | 1 + .../src/examples/SimplePiano/Component.tsx | 164 +++++++ .../src/examples/SimplePiano/Source.tsx | 167 +++++++ packages/audiodocs/static/audio/sounds/C4.mp3 | Bin 0 -> 78718 bytes .../audiodocs/static/audio/sounds/Ds4.mp3 | Bin 0 -> 73519 bytes .../audiodocs/static/audio/sounds/Fs4.mp3 | Bin 0 -> 68219 bytes packages/audiodocs/static/img/ADSR.svg | 432 ++++++++++++++++++ .../static/img/frequencies-on-piano.jpg | Bin 0 -> 111727 bytes packages/audiodocs/yarn.lock | 417 ++++++++++++++++- 12 files changed, 1551 insertions(+), 7 deletions(-) create mode 100644 packages/audiodocs/docs/fundamentals/making-a-piano-keyboard.mdx create mode 100644 packages/audiodocs/src/examples/SimplePiano/Component.tsx create mode 100644 packages/audiodocs/src/examples/SimplePiano/Source.tsx create mode 100644 packages/audiodocs/static/audio/sounds/C4.mp3 create mode 100644 packages/audiodocs/static/audio/sounds/Ds4.mp3 create mode 100644 packages/audiodocs/static/audio/sounds/Fs4.mp3 create mode 100644 packages/audiodocs/static/img/ADSR.svg create mode 100644 packages/audiodocs/static/img/frequencies-on-piano.jpg diff --git a/packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx b/packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx index 0ff007d6..8ef6f3ab 100644 --- a/packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx +++ b/packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx @@ -108,3 +108,17 @@ import LetsMakeSomeNoiseSrc from '!!raw-loader!@site/src/examples/LetsMakeSomeNo In web environment you can use `decodeAudioDataSource` directly on the asset url, without the need to download it first. ::: + +## Summary + +In this guide, we have learned how to create a simple audio player using `AudioContext` and `AudioBufferSourceNode` as well as how we can load audio data from a remote source. To sum up: + +- `AudioContext` is the main object that controls the audio graph. +- `decodeAudioDataSource` method can be used to load audio data from a local audio source in form of `AudioBuffer`. +- `AudioBufferSourceNode` can be used to any `AudioBuffer`. +- In order to hear the sounds, we need to connect the source node to the destination node exposed by `AudioContext`. +- We can control the playback of the sound using `start` and `stop` methods of the `AudioBufferSourceNode` (And other source nodes which we show later). + +## What's next? + +In [the next section](/fundamentals/making-a-piano-keyboard) we will learn more about how the audio graph works, what are audio params and how we can use them to create a simple piano keyboard. diff --git a/packages/audiodocs/docs/fundamentals/making-a-piano-keyboard.mdx b/packages/audiodocs/docs/fundamentals/making-a-piano-keyboard.mdx new file mode 100644 index 00000000..0db740a6 --- /dev/null +++ b/packages/audiodocs/docs/fundamentals/making-a-piano-keyboard.mdx @@ -0,0 +1,362 @@ +--- +sidebar_position: 3 +--- + +# Making a piano keyboard + +In this section, we will use some of the core audio api interfaces to create a simple piano keyboard. We will learn what is an `AudioParam`, how to use it to change the pitch of the sound. + +## Base application + +Like in previous example, we will start with simple app with couple of buttons so we just don't need to worry about the UI later. +You can just copy and paste the code below to your project. + +```tsx +import React from 'react'; +import { View, Text, Pressable } from 'react-native'; + +type KeyName = 'A' | 'B' | 'C' | 'D' | 'E'; + +interface ButtonProps { + keyName: KeyName; + onPressIn: (key: KeyName) => void; + onPressOut: (key: KeyName) => void; +} + +const Button = ({ onPressIn, onPressOut, keyName }: ButtonProps) => ( + onPressIn(keyName)} + onPressOut={() => onPressOut(keyName)} + style={({ pressed }) => ({ + margin: 4, + padding: 12, + borderRadius: 2, + backgroundColor: pressed ? '#d2e6ff' : '#abcdef', + })} + > + {`${keyName}`} + +); + +export default function SimplePiano() { + const onKeyPressIn = (which: KeyName) => {}; + const onKeyPressOut = (which: KeyName) => {}; + + return ( + + {Keys.map((key) => ( +