2. Sound
Content
0. Sound library
1. Playing mp3
2. Synthesize sounds
3. Analyzing mic-input: Amplitude
4. FFT
0. Sound library
First we have to load the sound library in HTML:
< script src="P5/addons/p5.sound.min.js">< /script>
1. Playing mp3
Load and play mp3 - files:
var song;
function setup() {
song = loadSound('yourFile.mp3');
song.loop();
createCanvas(640, 100);
background(200);
}
function draw(){
speed = map(mouseY, 0.1, height, 0, 2);
speed = constrain(speed, 0.01, 4);
song.rate(speed);
}
function mousePressed() {
if (song.isPlaying()) {
song.stop();
} else {
song.play();
}
}
Interact with speed and volume:
var song;
var speed;
var amp;
function preload(){
song = loadSound('material/lutos.mp3');
}
function setup() {
song.loop();
createCanvas(640, 200);
background(100);
stroke(150);
}
function draw(){
background(100);
speed = map(mouseY, 0.1, height, 0, 2);
speed = constrain(speed, 0.01, 4);
song.rate(speed);
amp = map(mouseX, 0.1, width, 0, 1);
amp = constrain(amp, 0.01, 1);
song.setVolume(amp);
line(mouseX, 0, mouseX, height);
line(0, mouseY, width, mouseY);
}
function mousePressed() {
if (song.isPlaying()) {
song.stop();
} else {
song.play();
}
}
2. Analyzing mic-input: Amplitude
var mic;
var isOn = false;
function setup() {
createCanvas(690, 400);
mic = new p5.AudioIn();
}
function draw() {
noStroke();
fill(235, 30);
rect(0, 0, width, height);
fill(0);
text("Press mouse to start tracking mic.", 10, 10)
var vol = mic.getLevel();
fill(127);
stroke(0);
// Draw an ellipse with height based on volume
//if(vol > 0.02){
var r = map(vol, 0, 1, 0, width * 30);
ellipse(width / 2, height / 2, r + 40, r + 40);
//}
}
function mousePressed() {
if (isOn) {
mic.stop();
isOn = false;
} else {
mic.start();
isOn = true;
}
}
3. FFT
var song;
function preload(){
song = loadSound('oreo.mp3');
fft = new p5.FFT();
}
function setup() {
song.rate(1);
createCanvas(690, 400);
background(100);
stroke(150);
}
function draw(){
background(230);
fill(0);
text("Press mouse to start/stop track.",10,10);
var spectrum = fft.analyze();
noStroke();
fill(200,0,0,100);
for (var i = 0; i< spectrum.length; i++){
var aktuellerWert = spectrum[i];
//var x = map(i, 0, spectrum.length, 0, width*3);
//var h = -height + map(aktuellerWert, 0, 255, height, 0);
var x = i*4;
var h = aktuellerWert;
rect(x, height, 1, -h );
}
}
function mousePressed() {
if (song.isPlaying()) {
song.stop();
} else {
song.play();
}
}
4. Synthesize sounds
Noise
function setup() {
createCanvas(640, 200);
background(100);
stroke(150);
fft = new p5.FFT();
ns = new p5.Noise()
ns.amp(0.5);
ns.start();
}
function draw(){
background(100);
var spectrum = fft.analyze();
noStroke();
fill(200);
for (var i = 0; i< spectrum.length; i++){
var x = map(i, 0, spectrum.length, 0, width*3);
var h = -height + map(spectrum[i], 0, 255, height, 0);
rect(x, height, width / spectrum.length, h )
}
}
Oscillators
Filters
Envelopes