Sampling Audio with p5.js Tutorial [Draft] #938
Description
Increasing access
This tutorial provides beginner level access to understanding concepts within p5.js, p5.sound and overall entry music production fundamentals. It also acts as generator for follow up ideas using the tutorial that can be poured back in the p5.js ecosphere.
This tutorial will be a great tool for people who are multidisciplinary or people who want to explore sound design and interactive audio. The Music Sampler will handle coding topics such as keyboard events, audio playback and linking user input with audio output.
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
Feature request details
In summary this tutorial will be working with p5.js’s sound library to load and play audio samples based on keyboard input.
A good reference for understanding the functionality of this tutorial is sampling with DAWs. Most Digital Audio Workstations (DAWs) have features that let you manipulate and “sample” audio files. The concept is seen with Ableton's “Slicer” and Logic Pro’s ‘Quick Sampler”.
This tutorial accomplishes the similar functionality as what is seen in the DAWs listed above, however it is all done through code. You are also provided with a great understanding of how sampling works overall.
There should not be an emphasis on User Interface for this tutorial, ideally users will take what they learn and experiment within their creative practice/lesson/etc.
Features this tutorial should cover:
1. Loading audio files:
- We are loading in local audio files to test, which is what makes this tutorial fun! I know there will be a difference in how media files are handled in p5.js 2.0. For this iteration, I used the first version.
2. Keyboard events
-
This section of the tutorial is the most technical in terms of logic. Here is where mapping keys to specific sections of the audio clip will be explained. I wrote in a string containing all the characters in the alphabet, numbers zero through nine (0-9). The string is listed out in alphabetical order, which is important to note with the keyboard mapping. The first letter in the alphabet (A), corresponds to the beginning of the audio clip, the last letter in the alphabet/string corresponds to the end of the audio clip.
-
I wouldn’t be opposed if the string for the keyboard mapping was retrospective with the layout of the keyboard (i.e “QWERTYUIOPASDFGHJKL… etc). Both options seem compelling in regards to future derivatives. This layout seems more intuitive in regards to usage and parallels more with the functionality of how sampling is handled in DAWs. In Ableton, Logic Pro, oftentimes, sounds are similarly mapped retrospectively with the keyboard, with the exception of the second row (“ASDFGHJKL”) of the keyboard being the starting point of the audio file.
If this approach was taken, then there would have to be a consideration of how to handle special characters/numbers. The first approach, where the characters are mapped out in alphabetical order warrants room for an entire umbrella of poetic computation. Either way I am not picky on which approach.
3. Sound Feedback
- This part corresponds to the user interface portion of the tutorial. Ideally, this section should be minimal, as we don’t want to go in depth and leave room for artists to manipulate on their own! If anything, the UI is simple and acts more so as a guide for the user to understand and confirm the functionality of the sampler. When a key is pressed, it should visually be reflected on the screen with a sound wav, along with the key that is pressed. Most DAWs have a visual interface of some sort to ensure users know what segment of a clip they are pressing.