Project Setup
Editor
- Local
- Visual Studio Code, my choice
- Atom
- Sublime
- Cloud
WEBAUDIO BASICS & SOUND FILE PLAYERS
Understanding the Audio Signal Path
ex:
const player = new Tone.Player().toDestination();
Creating a Sound File Player
starter template
Playing Multiple Sounds with Tone.Players
Triggering and changing sounds
- keyIsDown
- sliders.
Starting the sounds
store multiple samples in a Players object
const sounds = new Tone.Players({
name1: "url",
name2: "url",
name3: "url",
});
select sample
sounds.player("name1");
play sample
sounds.player("name1").start();
Tone Players example
Fork your previous example and create one players object
Using buttons
Alternatives to keyPressed?
- p5.js gives you access to the DOM (Document Object Model)
- createButton().
- Position it
- button1.position(x, y)
- listen on it
- button1.mousePressed()
ex:
button1 = createButton("button label");
button1.position(x, y);
button1.mousePressed();
play sample with buttons
starting template
Using sliders
Change the sound while it’s playing.
To make a slider in p5.js use createSlider().
Syntax
createSlider(min,max,[value],[step]);
Parameters
- min - minimum value of the slider
- max - maximum value of the slider
- value - default value of the slider
- step - step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
Current slider value is stored in slider.value()
Labeling your sampler
For the assignment you need to label your sampler:
Syntax
text(str,x,y);
Parameters
- str - text content
- y - the y axis coordinate of text
- x - the x axis coordinate of text