p5.js 로 사운드 입출력하기

1. 사운드 파일 재생

- 재생 가능한 사운드 파일 형식 : WAV, AIFF, MP3

// 사운드 파일 자동 재생

let soundFile;

function preload() {
  soundFile = loadSound('assets/sample.mp3');	// soundFile 객체 생성 및 초기화(파일 로딩)
}

function setup() {
  createCanvas(200, 100);
  background(200);
  textAlign(CENTER, CENTER);
  text('사운드 파일 재생', width/2, height/2);
  soundFile.play();				// 사운드 파일 재생
}

 

2. 사각형이 경계에 부딪힐 때마다 사운드가 재생되도록 만들어봅시다.

// 사각형이 좌우 경계에서 반사할 때마다 음향효과 재생

let soundFile, x = 0, velocity = 3;

function preload() {
  soundFile = loadSound('assets/clap.mp3');	// soundFile 객체 생성 및 초기화(파일 로딩)
}

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(0, 10);		// 페이딩 효과
  noStroke();			// 원의 외곽선 제거 (부드러운 페이딩 효과)
  rect(x, height/2, 50, 50);
  x += velocity;
  if (x < 0 || x > width) {	// 좌우 경계를 넘어서는 경우 (경계 반사)
    velocity *= -1;		// 반사: velocity 부호 변경 (x축 속도 성분이 증가 또는 감소)
    soundFile.play();		// 사운드 파일 재생
  }
}

 

 

3. 원이 사방 경계에 부딪힐 때마다 사운드가 재생되도록 만들어봅시다. ( 혼자서 한번 해보세요)

 

 

4. 원 안에서 마우스를 누르면 사운드 재생(이벤트 함수 사용)

// 원 안에서 마우스를 누르면 사운드 재생 (이벤트함수 사용)

let soundFile, r = 150;

function preload() {
  soundFile = loadSound('assets/clap.mp3'); 	// soundFile 객체 생성 및 초기화(파일 로딩)
}

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(0);
  fill(255, 255, 0);
  ellipse(width/2, height/2, r*2, r*2);
}

function mousePressed() {			// 이벤트함수
  let d = dist(mouseX, mouseY, width/2, height/2);
  if (d < r) {					// 원 내부에서 마우스를 누른 경우
    soundFile.playMode('restart');		// 이전 재생을 중지하고 다시 시작하는 모드
    soundFile.play(); 				// 사운드 파일 재생
  } else {					// 원 외부의 캔버스를 누른 경우
    soundFile.stop();				// 사운드 파일 재생 정지
  }
}

 

 

5. 사운드 진폭(파형) 표현하기

// 사운드 파일을 읽고 진폭 변화를 1차원 파형으로 표시

let soundFile, fft;

function preload() {
  soundFile = loadSound('assets/clap.mp3'); 	// soundFile 객체 생성 및 초기화(파일 로딩)
}

function setup() {
  createCanvas(500, 200);
  fft = new p5.FFT();					// p5.FFT 객체(fft) 생성
  //console.log(fft);					// p5.FFT 객체(fft) 정보 확인
  soundFile.play();					// 사운드 파일 재생
}

function draw() {
  background(0);
  let wave= fft.waveform();				// 시간 영역의 진폭값 배열 반환
  
  stroke(255);						// 파형 선 색상
  noFill();						// 꼭지점 연결 도형의 채움 색상 없음
  beginShape();						// 시간 파형 그리기 시작
  for (let i = 0; i < wave.length; i++) {		// 기본값: wave.length=1024
    let x = map(i, 0, wave.length, 0, width);		// x: 시간
    let y = map(wave[i], -1, 1, height, 0);		// y: 진폭
    vertex(x, y);					// 꼭지점
  }
  endShape();						// 시간 파형 그리기 종료
}

 

 

 

6. 사운드 진폭(파형) 에 따라 3차원 도형 크기 변화하기

// 사운드의 진폭 변화를 원의 크기 변화로 표현

let soundFile, myAmp, angle=0;

function preload() {
  soundFile = loadSound('assets/clap.mp3'); 	// soundFile 객체 생성 및 초기화(파일 로딩)
}

function setup() {
  createCanvas(500, 500, WEBGL);
  soundFile.play();				// 사운드 파일 재생
  myAmp = new p5.Amplitude();		// p5.Amplitude 객체(myAmp) 생성
}

function draw() {
  background(0);				
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle);
    
  let level = myAmp.getLevel() * 500;		// 사운드 샘플 진폭값(0∼500)
  fill(0, 255, 0);
  sphere(level, 24, 24);
  angle+=0.01;
}

 

7. 사운드 재생 음량의 크기에 따라 랜덤하게 이동하는 원들

let soundFile, myAmp, num = 100;
let x = [], y = [], speedX = [], speedY = [], c = [];

function preload() {
  soundFile = loadSound('assets/clap.mp3');
}

function setup() {
  createCanvas(500, 500);
  soundFile.play();
  myAmp = new p5.Amplitude();
  
  for (let i = 0; i < num; i++) {
    x[i] = random(width);
    y[i] = random(height);
    speedX[i] = random(-1, 1);
    speedY[i] = random(-1, 1);
    c[i] = color(random(255), random(255), random(255));
  }
}

function draw() {
  background(0, 10);
  let level = myAmp.getLevel() * 200;	
  for (let i = 0; i < num; i++) {
    stroke(c[i]);
    noFill();
    ellipse(x[i], y[i], level, level);
    x[i] += speedX[i];
    y[i] += speedY[i];
    if (x[i] < 0 || x[i] > width) {
      speedX[i] *= -1;
    }
    if (y[i] < 0 || y[i] > height) {
      speedY[i] *= -1;
    }
  }
}