사운드스케이프
vanilla
- Web Audio
- 사운드
- 제너러티브
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>사운드스케이프</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="stage">제너러티브 앰비언트 사운드스케이프</canvas>
11 <button id="start" type="button">
12 <span class="ico">►</span>
13 <span>소리 켜기 · Click for sound</span>
14 </button>
15 <script src="./script.js"></script>
16 </body>
17</html>
18아이디어
녹음 파일이 아니라 브라우저가 그 자리에서 소리를 합성한다. 다섯 보이스가 화음을 이루고, 화음은 11초마다 천천히 바뀌고, 그 위로 멜로디 음이 간헐적으로 떨어진다. 딜레이 피드백이 공간을 만든다.
동시에 AnalyserNode가 그 소리를 FFT로 분석해 — 화면이 지금 들리는
소리 그대로 반응한다. 저음은 큰 맥동, 고음은 잔별.
핵심 기법
Web Audio API의 노드 그래프 — 오실레이터 → 필터 → 딜레이 → 분석기.
1osc → voiceGain → lowpassFilter → master → analyser → 출력 2 ↘ delay → feedback ↺
인터랙션
- 커서 좌우 — 로우패스 필터의 컷오프. 왼쪽은 어둡고 둥글게, 오른쪽은 밝고 투명하게.
- 커서 상하 — 멜로디 음이 떨어지는 밀도. 위로 갈수록 촘촘해진다.
브라우저 자동재생 정책 때문에 처음 한 번은 화면을 눌러 소리를 켜야 한다.