고급 기법: 오디오 생성 및 시퀸싱

// 크로스 브라우저 호환성을 위해
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const wave = audioCtx.createPeriodicWave(wavetable.real, wavetable.imag);

function playSweep(time) {
  const osc = audioCtx.createOscillator();
  osc.setPeriodicWave(wave);
  osc.frequency.value = 440;
  osc.connect(audioCtx.destination);
  osc.start(time);
  osc.stop(time + 1);
}

<label for="attack">Attack</label>
<input
  name="attack"
  id="attack"
  type="range"
  min="0"
  max="1"
  value="0.2"
  step="0.1" />

<label for="release">Release</label>
<input
  name="release"
  id="release"
  type="range"
  min="0"
  max="1"
  value="0.5"
  step="0.1" />

let attackTime = 0.2;
const attackControl = document.querySelector("#attack");
attackControl.addEventListener(
  "input",
  function () {
    attackTime = Number(this.value);
  },
  false,
);

let releaseTime = 0.5;
const releaseControl = document.querySelector("#release");
releaseControl.addEventListener(
  "input",
  function () {
    releaseTime = Number(this.value);
  },
  false,
);

let sweepLength = 2;
function playSweep(time) {
  let osc = audioCtx.createOscillator();
  osc.setPeriodicWave(wave);
  osc.frequency.value = 440;

  let sweepEnv = audioCtx.createGain();
  sweepEnv.gain.cancelScheduledValues(time);
  sweepEnv.gain.setValueAtTime(0, time);
  // attack을 설정합니다
  sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime);
  // release를 설정합니다
  sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime);

  osc.connect(sweepEnv).connect(audioCtx.destination);
  osc.start(time);
  osc.stop(time + sweepLength);
}

const osc = audioCtx.createOscillator();
osc.type = "sine";
osc.frequency.value = 880;

const amp = audioCtx.createGain();
amp.gain.setValueAtTime(1, audioCtx.currentTime);

const lfo = audioCtx.createOscillator();
lfo.type = "square";
lfo.frequency.value = 30;

lfo.connect(amp.gain);
osc.connect(amp).connect(audioCtx.destination);
lfo.start();
osc.start(time);
osc.stop(time + pulseTime);

<label for="hz">Hz</label>
<input
  name="hz"
  id="hz"
  type="range"
  min="660"
  max="1320"
  value="880"
  step="1" />
<label for="lfo">LFO</label>
<input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" />

let pulseHz = 880;
const hzControl = document.querySelector("#hz");
hzControl.addEventListener(
  "input",
  function () {
    pulseHz = Number(this.value);
  },
  false,
);

let lfoHz = 30;
const lfoControl = document.querySelector("#lfo");
lfoControl.addEventListener(
  "input",
  function () {
    lfoHz = Number(this.value);
  },
  false,
);

let pulseTime = 1;
function playPulse(time) {
  let osc = audioCtx.createOscillator();
  osc.type = "sine";
  osc.frequency.value = pulseHz;

  let amp = audioCtx.createGain();
  amp.gain.value = 1;

  let lfo = audioCtx.createOscillator();
  lfo.type = "square";
  lfo.frequency.value = lfoHz;

  lfo.connect(amp.gain);
  osc.connect(amp).connect(audioCtx.destination);
  lfo.start();
  osc.start(time);
  osc.stop(time + pulseTime);
}

const bufferSize = audioCtx.sampleRate * noiseLength;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);

let data = buffer.getChannelData(0); // 데이터 얻기

// 버퍼를 노이즈로 채우기
for (let i = 0; i < bufferSize; i++) {
  data[i] = Math.random() * 2 - 1;
}

let noise = audioCtx.createBufferSource();
noise.buffer = buffer;

noise.connect(audioCtx.destination);
noise.start();

let bandpass = audioCtx.createBiquadFilter();
bandpass.type = "bandpass";
bandpass.frequency.value = 1000;

// 그래프 연결하기
noise.connect(bandpass).connect(audioCtx.destination);

<label for="duration">Duration</label>
<input
  name="duration"
  id="duration"
  type="range"
  min="0"
  max="2"
  value="1"
  step="0.1" />

<label for="band">Band</label>
<input
  name="band"
  id="band"
  type="range"
  min="400"
  max="1200"
  value="1000"
  step="5" />

let noiseDuration = 1;
const durControl = document.querySelector("#duration");
durControl.addEventListener(
  "input",
  function () {
    noiseDuration = Number(this.value);
  },
  false,
);

let bandHz = 1000;
const bandControl = document.querySelector("#band");
bandControl.addEventListener(
  "input",
  function () {
    bandHz = Number(this.value);
  },
  false,
);

function playNoise(time) {
  const bufferSize = audioCtx.sampleRate * noiseDuration; // 노트의 시간을 설정합니다
  const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); // 빈 버퍼를 생성합니다
  let data = buffer.getChannelData(0); // get data

  // 버퍼를 노이즈로 채웁니다
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 2 - 1;
  }

  // 생성된 데이터에 대해 버퍼 소스 생성하기
  let noise = audioCtx.createBufferSource();
  noise.buffer = buffer;

  let bandpass = audioCtx.createBiquadFilter();
  bandpass.type = "bandpass";
  bandpass.frequency.value = bandHz;

  // 그래프 연결하기
  noise.connect(bandpass).connect(audioCtx.destination);
  noise.start(time);
}

async function getFile(audioContext, filepath) {
  const response = await fetch(filepath);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  return audioBuffer;
}

async function setupSample() {
  const filePath = "dtmf.mp3";
  const sample = await getFile(audioCtx, filePath);
  return sample;
}

setupSample().then((sample) => {
  // 샘플은 우리의 버퍼된 파일입니다
  // ...
});

function playSample(audioContext, audioBuffer, time) {
  const sampleSource = audioContext.createBufferSource();
  sampleSource.buffer = audioBuffer;
  sampleSource.connect(audioContext.destination);
  sampleSource.start(time);
  return sampleSource;
}

<label for="rate">Rate</label>
<input
  name="rate"
  id="rate"
  type="range"
  min="0.1"
  max="2"
  value="1"
  step="0.1" />

let playbackRate = 1;
const rateControl = document.querySelector("#rate");
rateControl.addEventListener(
  "input",
  function () {
    playbackRate = Number(this.value);
  },
  false,
);

function playSample(audioContext, audioBuffer, time) {
  const sampleSource = audioContext.createBufferSource();
  sampleSource.buffer = audioBuffer;
  sampleSource.playbackRate.value = playbackRate;
  sampleSource.connect(audioContext.destination);
  sampleSource.start(time);
  return sampleSource;
}

let tempo = 60.0;
const bpmControl = document.querySelector("#bpm");
bpmControl.addEventListener(
  "input",
  function () {
    tempo = Number(this.value);
  },
  false,
);

const lookahead = 25.0; // 얼마나 자주 스케쥴링 함수를 호출할 것인지 (밀리세컨드로)
const scheduleAheadTime = 0.1; // 얼마나 미리 오디오를 스케쥴할지 (초)

let currentNote = 0;
let nextNoteTime = 0.0; // 다음 노트가 예정되어 있을 때

function nextNote() {
  const secondsPerBeat = 60.0 / tempo;

  nextNoteTime += secondsPerBeat; // 박자 시간을 유지하기 위해 비트 길이를 추가

  // 박자 숫자를 진행시키고, 0으로 만듭니다
  currentNote++;
  if (currentNote === 4) {
    currentNote = 0;
  }
}

const notesInQueue = [];

function scheduleNote(beatNumber, time) {
  // 우리가 재생 중이 아닐지라도, 노트를 큐에 푸시합니다.
  notesInQueue.push({ note: beatNumber, time: time });

  if (
    pads[0]
      .querySelectorAll("button")
      [beatNumber].getAttribute("aria-checked") === "true"
  ) {
    playSweep(time);
  }
  if (
    pads[1]
      .querySelectorAll("button")
      [beatNumber].getAttribute("aria-checked") === "true"
  ) {
    playPulse(time);
  }
  if (
    pads[2]
      .querySelectorAll("button")
      [beatNumber].getAttribute("aria-checked") === "true"
  ) {
    playNoise(time);
  }
  if (
    pads[3]
      .querySelectorAll("button")
      [beatNumber].getAttribute("aria-checked") === "true"
  ) {
    playSample(audioCtx, dtmf, time);
  }
}

function scheduler() {
  // 다음 구간 전에 재생할 필요가 있을 노트가 있는 동안, 그것들을 스케쥴하고 포인터를 진행시킵니다.
  while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime) {
    scheduleNote(currentNote, nextNoteTime);
    nextNote();
  }
  timerID = window.setTimeout(scheduler, lookahead);
}

let lastNoteDrawn = 3;

function draw() {
  let drawNote = lastNoteDrawn;
  let currentTime = audioCtx.currentTime;

  while (notesInQueue.length && notesInQueue[0].time < currentTime) {
    drawNote = notesInQueue[0].note;
    notesInQueue.splice(0, 1); // 노트를 큐에서 제거합니다
  }

  // 우리는 오직 노트가 이동되었을 경우 그릴 필요가 있습니다.
  if (lastNoteDrawn != drawNote) {
    pads.forEach(function (el, i) {
      el.children[lastNoteDrawn].style.borderColor = "hsla(0, 0%, 10%, 1)";
      el.children[drawNote].style.borderColor = "hsla(49, 99%, 50%, 1)";
    });

    lastNoteDrawn = drawNote;
  }
  // 다시 그리기 위해 설정됨
  requestAnimationFrame(draw);
}

// 로드된 샘플이 재생을 허용했을 때
let loadingEl = document.querySelector(".loading");
const playButton = document.querySelector("[data-playing]");
let isPlaying = false;
setupSample().then((sample) => {
  loadingEl.style.display = "none"; // 로딩 스크린 제거

  dtmf = sample; // 우리의 playSample 함수에서 사용될 것임

  playButton.addEventListener("click", function () {
    isPlaying = !isPlaying;

    if (isPlaying) {
      // 재생 시작

      // 컨텍스트가 연기(suspended) 상태인지 확인 (자동 재생 정책)
      if (audioCtx.state === "suspended") {
        audioCtx.resume();
      }

      currentNote = 0;
      nextNoteTime = audioCtx.currentTime;
      scheduler(); // 스케쥴링 시작
      requestAnimationFrame(draw); // 드로잉 루프 시작.
      this.dataset.playing = "true";
    } else {
      window.clearTimeout(timerID);
      this.dataset.playing = "false";
    }
  });
});