// 기본 AudioContext 생성

const audioCtx = new AudioContext();



// Safari 호환성을 위한 처리 (구버전 Safari는 webkitAudioContext 사용)

const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioCtx = new AudioContext();



// 샘플레이트 지정 (기본값은 보통 44100Hz 또는 48000Hz)

const audioCtx = new AudioContext({ sampleRate: 44100 });

// 사용자 클릭 후 AudioContext 시작하는 패턴

let audioCtx;



document.getElementById('startBtn').addEventListener('click', () => {

if (!audioCtx) {

audioCtx = new AudioContext();

}

// suspended 상태라면 resume

if (audioCtx.state === 'suspended') {

audioCtx.resume();

}

});

const audioCtx = new AudioContext();



// 오실레이터 생성

const oscillator = audioCtx.createOscillator();



// 파형 타입 설정: 'sine' | 'square' | 'sawtooth' | 'triangle' | 'custom'

oscillator.type = 'sine';



// 주파수 설정 (Hz) — 440Hz = 라(A4) 음

oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);



// 출력에 연결

oscillator.connect(audioCtx.destination);



// 시작 (0 = 즉시 시작)

oscillator.start(0);



// 2초 후 정지

oscillator.stop(audioCtx.currentTime + 2);

async function loadAndPlayAudio(url) {

const audioCtx = new AudioContext();



// 1. 파일 fetch

const response = await fetch(url);

const arrayBuffer = await response.arrayBuffer();



// 2. 오디오 데이터 디코딩

const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);



// 3. 소스 노드 생성 및 버퍼 연결

const source = audioCtx.createBufferSource();

source.buffer = audioBuffer;



// 4. 루프 설정 (선택)

source.loop = true;



// 5. 재생 속도 조절 (1.0 = 정상, 2.0 = 2배속)

source.playbackRate.value = 1.0;



// 6. 출력 연결 후 재생

source.connect(audioCtx.destination);

source.start(0);



return source;

}

const gainNode = audioCtx.createGain();



// 즉시 볼륨 설정

gainNode.gain.value = 0.8;



// 시간에 따른 볼륨 변화 (페이드 인 효과)

gainNode.gain.setValueAtTime(0, audioCtx.currentTime);

gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);



// 페이드 아웃 (지수적 감소 — 더 자연스러운 소리)

gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 3);



// 연결

source.connect(gainNode);

gainNode.connect(audioCtx.destination);

// 로우패스 필터 (저음만 통과)

const filter = audioCtx.createBiquadFilter();

filter.type = 'lowpass';

filter.frequency.value = 1000; // 1kHz 이하만 통과

filter.Q.value = 1.0; // 공진 (날카로움)



// 피킹 EQ (특정 주파수 부스트)

const peakFilter = audioCtx.createBiquadFilter();

peakFilter.type = 'peaking';

peakFilter.frequency.value = 2000; // 2kHz

peakFilter.gain.value = 6; // +6dB 부스트

peakFilter.Q.value = 2.0;



// 3밴드 EQ 구성

const lowEQ = audioCtx.createBiquadFilter();

lowEQ.type = 'lowshelf';

lowEQ.frequency.value = 200;

lowEQ.gain.value = 3; // 저음 +3dB



const midEQ = audioCtx.createBiquadFilter();

midEQ.type = 'peaking';

midEQ.frequency.value = 1000;

midEQ.gain.value = -2; // 중음 -2dB



const highEQ = audioCtx.createBiquadFilter();

highEQ.type = 'highshelf';

highEQ.frequency.value = 8000;

highEQ.gain.value = 4; // 고음 +4dB



// 체인 연결

source.connect(lowEQ);

lowEQ.connect(midEQ);

midEQ.connect(highEQ);

highEQ.connect(audioCtx.destination);

// 딜레이 노드 생성 (최대 딜레이 시간 지정)

const delay = audioCtx.createDelay(5.0); // 최대 5초

delay.delayTime.value = 0.3; // 0.3초 딜레이



// 피드백 딜레이 (에코 효과)

const feedbackGain = audioCtx.createGain();

feedbackGain.gain.value = 0.5; // 50% 피드백



// 연결: source → delay → output

//              ↑_feedbackGain_↓ (피드백 루프)

source.connect(delay);

delay.connect(feedbackGain);

feedbackGain.connect(delay); // 피드백 루프

delay.connect(audioCtx.destination);

source.connect(audioCtx.destination); // 드라이 신호도 출력

async function createReverb(audioCtx, irUrl) {

const convolver = audioCtx.createConvolver();



// IR 파일 로드

const response = await fetch(irUrl);

const arrayBuffer = await response.arrayBuffer();

convolver.buffer = await audioCtx.decodeAudioData(arrayBuffer);



return convolver;

}



// 드라이/웻 믹스 (리버브 양 조절)

const dryGain = audioCtx.createGain();

const wetGain = audioCtx.createGain();

dryGain.gain.value = 0.7; // 원본 70%

wetGain.gain.value = 0.3; // 리버브 30%



source.connect(dryGain);

source.connect(convolver);

convolver.connect(wetGain);

dryGain.connect(audioCtx.destination);

wetGain.connect(audioCtx.destination);

const compressor = audioCtx.createDynamicsCompressor();



// 스레숄드: 이 레벨 이상의 신호를 압축 (-24dB)

compressor.threshold.value = -24;



// 니: 압축이 시작되는 부드러움 (30dB)

compressor.knee.value = 30;



// 레이쇼: 압축 비율 (12:1)

compressor.ratio.value = 12;



// 어택: 압축 시작까지 걸리는 시간 (0.003초)

compressor.attack.value = 0.003;



// 릴리즈: 압축 해제까지 걸리는 시간 (0.25초)

compressor.release.value = 0.25;



source.connect(compressor);

compressor.connect(audioCtx.destination);

const analyser = audioCtx.createAnalyser();



// FFT 크기 설정 (2의 거듭제곱, 32~32768)

// 클수록 주파수 해상도 높아지지만 시간 해상도 낮아짐

analyser.fftSize = 2048;



// 스무딩 (0~1, 높을수록 부드럽게)

analyser.smoothingTimeConstant = 0.8;



// 최소/최대 데시벨 범위

analyser.minDecibels = -90;

analyser.maxDecibels = -10;



// 주파수 데이터 배열 (frequencyBinCount = fftSize / 2)

const bufferLength = analyser.frequencyBinCount; // 1024

const dataArray = new Uint8Array(bufferLength);



// 연결 (분석 노드는 신호를 통과시킴)

source.connect(analyser);

analyser.connect(audioCtx.destination);



// 실시간 주파수 데이터 가져오기

function getFrequencyData() {

analyser.getByteFrequencyData(dataArray);

// dataArray에 0~255 범위의 주파수 데이터가 담김

return dataArray;

}



// 실시간 파형 데이터 가져오기

function getTimeDomainData() {

analyser.getByteTimeDomainData(dataArray);

return dataArray;

}

const canvas = document.getElementById('visualizer');

const canvasCtx = canvas.getContext('2d');



function drawVisualizer() {

requestAnimationFrame(drawVisualizer);



// 주파수 데이터 가져오기

analyser.getByteFrequencyData(dataArray);



// 배경 지우기

canvasCtx.fillStyle = '#1e2a35';

canvasCtx.fillRect(0, 0, canvas.width, canvas.height);



const barWidth = (canvas.width / bufferLength) * 2.5;

let barHeight;

let x = 0;



for (let i = 0; i < bufferLength; i++) {

barHeight = dataArray[i] / 255 * canvas.height;



// 주파수에 따라 색상 변화

const hue = (i / bufferLength) * 240;

canvasCtx.fillStyle = `hsl(${hue}, 70%, 60%)`;

canvasCtx.fillRect(

x,

canvas.height - barHeight,

barWidth,

barHeight

);



x += barWidth + 1;

}

}



drawVisualizer();

async function setupMicrophone() {

const audioCtx = new AudioContext();



// 마이크 권한 요청 및 스트림 획득

const stream = await navigator.mediaDevices.getUserMedia({

audio: {

echoCancellation: true, // 에코 캔슬링

noiseSuppression: true, // 노이즈 억제

sampleRate: 44100

}

});



// 마이크 스트림을 Web Audio API 소스로 변환

const micSource = audioCtx.createMediaStreamSource(stream);



// 분석 노드 연결

const analyser = audioCtx.createAnalyser();

micSource.connect(analyser);



// 이펙트 추가 (예: 피치 시프터 효과를 위한 딜레이)

const gainNode = audioCtx.createGain();

analyser.connect(gainNode);

gainNode.connect(audioCtx.destination);



return { micSource, analyser, gainNode };

}



// 마이크 중지

function stopMicrophone(stream) {

stream.getTracks().forEach(track => track.stop());

}

// 자기상관 기반 피치 감지

function detectPitch(analyser, audioCtx) {

const bufferLength = analyser.fftSize;

const buffer = new Float32Array(bufferLength);

analyser.getFloatTimeDomainData(buffer);



// 자기상관 계산

let r1 = 0, r2 = bufferLength - 1, threshold = 0.2;



// 신호 시작점 찾기

for (let i = 0; i < bufferLength / 2; i++) {

if (Math.abs(buffer[i]) < threshold) { r1 = i; break; }

}

for (let i = 1; i < bufferLength / 2; i++) {

if (Math.abs(buffer[bufferLength - i]) < threshold) { r2 = bufferLength - i; break; }

}



const buf2 = buffer.slice(r1, r2);

const c = new Array(buf2.length).fill(0);



for (let i = 0; i < buf2.length; i++) {

for (let j = 0; j < buf2.length - i; j++) {

c[i] += buf2[j] * buf2[j + i];

}

}



// 피크 찾기

let d = 0;

while (c[d] > c[d + 1]) d++;

let maxVal = -1, maxPos = -1;

for (let i = d; i < buf2.length; i++) {

if (c[i] > maxVal) { maxVal = c[i]; maxPos = i; }

}



// 주파수 계산

const frequency = audioCtx.sampleRate / maxPos;

return frequency;

}

function createADSREnvelope(audioCtx, gainNode, options = {}) {

const {

attack = 0.01,   // 어택 시간 (초)

decay = 0.1,     // 디케이 시간 (초)

sustain = 0.7,   // 서스테인 레벨 (0~1)

release = 0.3,   // 릴리즈 시간 (초)

peak = 1.0       // 피크 레벨

} = options;



const now = audioCtx.currentTime;

const gain = gainNode.gain;



// 초기값 0으로 설정

gain.setValueAtTime(0, now);



// Attack: 0 → peak

gain.linearRampToValueAtTime(peak, now + attack);



// Decay: peak → sustain

gain.exponentialRampToValueAtTime(sustain, now + attack + decay);



// Sustain: 유지 (노트 오프 시까지)

// Release는 노트 오프 이벤트에서 처리



return {

noteOff: (releaseTime = audioCtx.currentTime) => {

gain.cancelScheduledValues(releaseTime);

gain.setValueAtTime(gain.value, releaseTime);

// Release: sustain → 0

gain.exponentialRampToValueAtTime(0.001, releaseTime + release);

}

};

}

class BrowserSynth {

constructor() {

this.audioCtx = null;

this.activeNotes = new Map();

this.masterGain = null;

this.filter = null;

this.compressor = null;

this.waveType = 'sawtooth';

}



init() {

this.audioCtx = new AudioContext();



// 마스터 체인 구성

this.filter = this.audioCtx.createBiquadFilter();

this.filter.type = 'lowpass';

this.filter.frequency.value = 8000;

this.filter.Q.value = 2.0;



this.masterGain = this.audioCtx.createGain();

this.masterGain.gain.value = 0.7;



this.compressor = this.audioCtx.createDynamicsCompressor();

this.compressor.threshold.value = -20;

this.compressor.ratio.value = 8;



// 체인 연결

this.filter.connect(this.masterGain);

this.masterGain.connect(this.compressor);

this.compressor.connect(this.audioCtx.destination);

}



noteOn(frequency) {

if (this.activeNotes.has(frequency)) return;



const osc = this.audioCtx.createOscillator();

const envGain = this.audioCtx.createGain();



osc.type = this.waveType;

osc.frequency.value = frequency;



// ADSR 적용

const now = this.audioCtx.currentTime;

envGain.gain.setValueAtTime(0, now);

envGain.gain.linearRampToValueAtTime(0.8, now + 0.01);

envGain.gain.exponentialRampToValueAtTime(0.5, now + 0.1);



osc.connect(envGain);

envGain.connect(this.filter);

osc.start();



this.activeNotes.set(frequency, { osc, envGain });

}



noteOff(frequency) {

const note = this.activeNotes.get(frequency);

if (!note) return;



const { osc, envGain } = note;

const now = this.audioCtx.currentTime;



// Release

envGain.gain.cancelScheduledValues(now);

envGain.gain.setValueAtTime(envGain.gain.value, now);

envGain.gain.exponentialRampToValueAtTime(0.001, now + 0.3);



osc.stop(now + 0.3);

this.activeNotes.delete(frequency);

}

}



// 사용 예시

const synth = new BrowserSynth();



document.addEventListener('click', () => {

synth.init();

});



// 키보드 매핑

const keyFreqMap = {

'a': 261.63, // C4

'w': 277.18, // C#4

's': 293.66, // D4

'e': 311.13, // D#4

'd': 329.63, // E4

'f': 349.23, // F4

't': 369.99, // F#4

'g': 392.00, // G4

'y': 415.30, // G#4

'h': 440.00, // A4

'u': 466.16, // A#4

'j': 493.88, // B4

'k': 523.25, // C5

};



document.addEventListener('keydown', (e) => {

if (e.repeat) return;

const freq = keyFreqMap[e.key];

if (freq) synth.noteOn(freq);

});



document.addEventListener('keyup', (e) => {

const freq = keyFreqMap[e.key];

if (freq) synth.noteOff(freq);

});

// === my-processor.js (Worklet 프로세서 파일) ===

class MyProcessor extends AudioWorkletProcessor {

constructor(options) {

super();

this.gain = 1.0;



// 메인 스레드에서 메시지 수신

this.port.onmessage = (event) => {

if (event.data.type === 'setGain') {

this.gain = event.data.value;

}

};

}



// 핵심 메서드: 128 샘플씩 처리

process(inputs, outputs, parameters) {

const input = inputs[0];

const output = outputs[0];



// 각 채널 처리

for (let channel = 0; channel < output.length; channel++) {

const inputChannel = input[channel];

const outputChannel = output[channel];



// 샘플별 처리 (여기서 DSP 알고리즘 구현)

for (let i = 0; i < outputChannel.length; i++) {

// 예: 게인 적용

outputChannel[i] = inputChannel[i] * this.gain;

}

}



// true 반환 = 프로세서 계속 실행

return true;

}

}



registerProcessor('my-processor', MyProcessor);

// === 메인 스크립트 ===

const audioCtx = new AudioContext();



// Worklet 모듈 로드

await audioCtx.audioWorklet.addModule('my-processor.js');



// AudioWorkletNode 생성

const myNode = new AudioWorkletNode(audioCtx, 'my-processor');



// 메인 스레드에서 Worklet으로 메시지 전송

myNode.port.postMessage({ type: 'setGain', value: 0.8 });



// 연결

source.connect(myNode);

myNode.connect(audioCtx.destination);

// 3D 공간 음향 구현

const panner = audioCtx.createPanner();



// 패닝 모델 설정

panner.panningModel = 'HRTF'; // 머리 전달 함수 (가장 현실적)

panner.distanceModel = 'inverse'; // 거리에 따른 감쇠



// 소리 위치 설정 (x, y, z)

panner.positionX.value = 5;  // 오른쪽 5m

panner.positionY.value = 0;  // 같은 높이

panner.positionZ.value = -3; // 앞쪽 3m



// 리스너(청취자) 위치 설정

const listener = audioCtx.listener;

listener.positionX.value = 0;

listener.positionY.value = 0;

listener.positionZ.value = 0;



// 리스너 방향 설정

listener.forwardX.value = 0;

listener.forwardY.value = 0;

listener.forwardZ.value = -1;



source.connect(panner);

panner.connect(audioCtx.destination);

// 정확한 메트로놈 구현 (Web Audio API의 타이밍 정확성 활용)

class Metronome {

constructor(audioCtx) {

this.audioCtx = audioCtx;

this.bpm = 120;

this.isPlaying = false;

this.nextBeatTime = 0;

this.lookahead = 25; // ms (스케줄링 간격)

this.scheduleAheadTime = 0.1; // 초 (미리 스케줄링할 시간)

}



scheduleBeat(time) {

// 클릭 소리 생성

const osc = this.audioCtx.createOscillator();

const gain = this.audioCtx.createGain();



osc.frequency.value = 880;

gain.gain.setValueAtTime(1, time);

gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);



osc.connect(gain);

gain.connect(this.audioCtx.destination);

osc.start(time);

osc.stop(time + 0.05);

}



scheduler() {

while (this.nextBeatTime < this.audioCtx.currentTime + this.scheduleAheadTime) {

this.scheduleBeat(this.nextBeatTime);

this.nextBeatTime += 60.0 / this.bpm;

}

if (this.isPlaying) {

setTimeout(() => this.scheduler(), this.lookahead);

}

}



start() {

this.isPlaying = true;

this.nextBeatTime = this.audioCtx.currentTime;

this.scheduler();

}



stop() {

this.isPlaying = false;

}

}

// 노드 정리 방법

function cleanupNode(node) {

// 모든 연결 해제

node.disconnect();



// 소스 노드라면 정지

if (node.stop) {

try { node.stop(); } catch(e) {}

}

}



// AudioContext 닫기 (더 이상 사용하지 않을 때)

audioCtx.close().then(() => {

console.log('AudioContext 닫힘');

});



// 큰 AudioBuffer는 사용 후 null로 설정

source.buffer = null;

// 탭 전환 처리

document.addEventListener('visibilitychange', () => {

if (document.hidden) {

// 탭이 숨겨지면 AudioContext 일시정지

audioCtx.suspend();

} else {

// 탭이 다시 보이면 재개

audioCtx.resume();

}

});



// iOS Safari 자동재생 정책 대응

document.addEventListener('touchstart', function initAudio() {

if (audioCtx.state === 'suspended') {

audioCtx.resume();

}

document.removeEventListener('touchstart', initAudio);

}, { once: true });

// Tone.js 예시

import * as Tone from 'tone';



// 신디사이저 생성

const synth = new Tone.Synth({

oscillator: { type: 'sawtooth' },

envelope: {

attack: 0.01,

decay: 0.1,

sustain: 0.5,

release: 0.3

}

}).toDestination();



// 이펙트 체인

const reverb = new Tone.Reverb(2).toDestination();

const delay = new Tone.FeedbackDelay('8n', 0.5).connect(reverb);

synth.connect(delay);



// 시퀀서

const seq = new Tone.Sequence((time, note) => {

synth.triggerAttackRelease(note, '8n', time);

}, ['C4', 'E4', 'G4', 'B4'], '4n');



// 재생

await Tone.start();

seq.start();

Tone.Transport.start();

// Meyda.js 예시

const analyzer = Meyda.createMeydaAnalyzer({

audioContext: audioCtx,

source: source,

bufferSize: 512,

featureExtractors: ['rms', 'spectralCentroid', 'chroma'],

callback: (features) => {

console.log('RMS:', features.rms);

console.log('스펙트럼 센트로이드:', features.spectralCentroid);

console.log('크로마:', features.chroma);

}

});



analyzer.start();

// 1. OfflineAudioContext로 오프라인 렌더링 (실시간 재생 없이 처리)

const offlineCtx = new OfflineAudioContext({

numberOfChannels: 2,

length: 44100 * 10, // 10초

sampleRate: 44100

});



// 노드 구성...

const renderedBuffer = await offlineCtx.startRendering();

// renderedBuffer에 처리된 오디오 데이터가 담김



// 2. 자주 사용하는 AudioBuffer는 캐싱

const audioBufferCache = new Map();



async function getCachedBuffer(url) {

if (audioBufferCache.has(url)) {

return audioBufferCache.get(url);

}

const buffer = await loadAudioBuffer(url);

audioBufferCache.set(url, buffer);

return buffer;

}



// 3. 불필요한 AnalyserNode 비활성화

// 비주얼라이저가 보이지 않을 때는 requestAnimationFrame 취소

let animFrameId;



function startVisualization() {

function draw() {

animFrameId = requestAnimationFrame(draw);

// 그리기 코드...

}

draw();

}



function stopVisualization() {

cancelAnimationFrame(animFrameId);

}

// Web MIDI API 연동

async function setupMIDI() {

const midiAccess = await navigator.requestMIDIAccess();



midiAccess.inputs.forEach(input => {

input.onmidimessage = (event) => {

const [status, note, velocity] = event.data;



// Note On (144 = 0x90)

if (status === 144 && velocity > 0) {

const frequency = 440 * Math.pow(2, (note - 69) / 12);

synth.noteOn(frequency);

}



// Note Off (128 = 0x80 또는 velocity 0)

if (status === 128 || (status === 144 && velocity === 0)) {

const frequency = 440 * Math.pow(2, (note - 69) / 12);

synth.noteOff(frequency);

}

};

});

}