Audio
Web Audio API
audio element๋ก ๋ถ๊ฐ๋ฅํ ๋ณต์กํ ์ธํฐ๋ ํฐ๋ธํ ์ค๋์ค ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ค ํ ๋ ์ฌ์ฉ ๋๋ค.
๊ทธ๋ํ์ ๊ธฐ๋ฐํ ์ค๋์ค ํ๋ก๊ทธ๋๋ฐ API
Audio Node
๋ผ ๋ถ๋ฆฌ์ฐ๋ ๋ค์ํ ์์๋ค์ ์ฐ๊ฒฐํ์ฌ ๊ทธ๋ํ๋ฅผ ๋ง๋ ๋ค.
Audio Element
๋ฏธ๋์ด ์ฌ์
Web Audio API
๊ฒ์
ํ์ํ์
์์ ์ ์
์์ ๊ต์ก
์ ์ฒด ์ํฅ
AudioContext
๋ชจ๋ ์น ์ค๋์ค ๊ธฐ๋ฅ์ ๋ชจ์ฒด๊ฐ ๋๋ ๊ฐ์ฒด
๋ค์ํ ์ค๋์ค ๋ ธ๋๋ฅผ ๋ง๋ฆ
์ค๋์ค ์ฌ์์ ์์ํ๊ฑฐ๋ ๋ฉ์ถ๋ ๊ธฐ๋ฅ์ ์ ๊ณต
const ctx = new AudioContext();
AudioBuffer
์ค๋์ค ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๊ฐ์ฒด
AudioBuffer๋ฅผ ์ฌ์ฉํด์ mp3 ํ์ผ๊ณผ ๊ฐ์ ์ธ๋ถ ์ค๋์ค ๋ฆฌ์์ค๋ฅผ ์น์์ ์ฌ์์ํค๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
์ธ๋ถ ์ค๋์ค ํ์ผ์ ๋ก๋ํ๊ณ , arrayBuffer ๊ฐ์ฒด๋ก ๋ณํ ํ audio context์ ์ ๋ฌํ๋ค.
decodeAudioData๋ฅผ ํ์ฉํ์ฌ arrayBuffer๋ฅผ web audio api๊ฐ ์ดํดํ ์ ์๋ ํ์์ผ๋ก ๋ณํ(decode)ํ๋ค.
AudioBufferSourceNode๋ฅผ ํตํด ์ค๋์ค๋ฅผ ์ฌ์์ํจ๋ค.
const ctx = new AudioContext();
const res = await window.fetch(url);
const arrayBuffer = await res.arrayBuffer();
const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
const source = ctx.createBufferSource();
source.buffer = audioBuffer;
source.connect(ctx.destination);
source.start();
Oscillator
ํ๋ ์์ฑ์ ๋ด๋น
ํ๋ ํ์
"sine"
,"square"
,"sawtooth"
,"triangle"
,"custom"
const osc = ctx.createOscillator();
osc.type = "sign";
Gain
๋ณผ๋ฅจ ๋ด๋น
const amp = ctx.createGain();
Compressor
์ํฅ์
Dynamic Range
๋ฅผ ์ขํ๋๋ฐ ์ฌ์ฉ
const convolver = ctx.createDynamicsCompressor();
Dyanmic Range๋ฅผ ์๋์ ์ผ๋ก ์ค์ธ๋ค ์๋ฆฌ์ ์ ์ฒด์ ์ธ ์๋์ ์ฆ๊ฐ์์ผ์ ์กฐ๊ธ ๋ ๋ฐ๋ ฅ์๋ ์๋ฆฌ๋ฅผ ๋ํ๋ด๊ฒ ํ๋ค. (with Gain)
ํ๋ผ๋ฏธํฐ
Threshold โ Compressor๊ฐ ์์๋ ์๋
์ ๋ ฅ ์ํฅ์ด ํด๋น ํ๋ผ๋ฏธํฐ๋ณด๋ค ํฌ๋ฉด Compressor๊ฐ ๋์ํด ์ถ๋ ฅ ์๋์ ์ค์ด๊ฒ ๋๋ค.
Ratio โ ์๋์ ์ผ๋ง๋ ์ค์ธ๊ฒ์ธ์ง
Threshold์ ์กฐํฉํ์ฌ ์๋ฆฌ๊ฐ ๊ฐ์ง
Dynamic Range
๋ฅผ ์ ์ดํ ์ ์๋ค.
Makeup Gain โ ์์ถ๋
Dynamic Range
๋ฅผ ๋ณด์ํด์ฃผ๋ ์ญํ์์ถ๋ ๋งํผ ์๋ฆฌ๋ฅผ ์ฌ๋ ค์ฃผ๋ฉด ๋ฐ๋ ฅ์๋ ์๋ฆฌ๋ฅผ ๋ํ๋ผ ์ ์๋ค.
๋ฒ์ค ์ดํํธ
์ฌ๋ฌ ์๋ฆฌ๊ฐ ํ๋๋ก ํฉ์ณ์ง๋ ๊ฒฝ๋ก๋ฅผ ๋ฒ์ค๋ผ ํ๋ค.
์ปดํ๋ ์๋ ๋ฒ์ค ๊ธธ๋ชฉ์ ์ฝ์ ๋์ด์ ธ์ผ ํ๋ค.
Dynamic Compressor Node๋ CPU ์๋ชจ๊ฐ ๊ฝค ํฌ๋ค.
๊ฐ ์ํ๋ง๋ค ๊ฐ๋ณ์ ์ผ๋ก ์ ์ฉ์ํค๊ธฐ ๋ณด๋ค๋ ์ต์ข ์ถ๋ ฅ์ ์ ์ฉํ๋๊ฒ ํจ์จ์ ์ด๋ค.
๋ชจ๋ ์๋ฆฌ๊ฐ ํ๋์ ์ปดํ๋ ์๋ฅผ ํต๊ณผ์ํค๊ฒ ํจ์ผ๋ก์จ ์ ์ฒด์ ์ธ ์์์ ์ผ๊ด์ฑ๋ ์งํฌ ์ ์๋ค.
Convolver
๋ฆฌ๋ฒ๋ธ(์ํฅ) ํจ๊ณผ ๋ด๋น
Convolver Node๋ง์ผ๋ก๋ ์๋ฌด๋ฐ ํจ๊ณผ๋ฅผ ๋ผ ์ ์๋ค.
์ํ์ค ์๋ต(Impuls Response)์ด๋ผ ๋ถ๋ฆฌ๋ ์ค๋์ค ํ์ผ์ ์ค๋์ค ๋ฒํผ๋ก ๋ถ๋ฌ๋ค์ฌ์ ์ปจ๋ณผ๋ฒ์ ํ ๋นํด์ค์ผ ํ๋ค
๋ง์ฐฌ๊ฐ์ง๋ก CPU์๋ชจ๊ฐ ํฌ๊ธฐ ๋๋ฌธ์ ๋ฒ์ค์ดํํธ๋ฅผ ์ฌ์ฉํด์ ์ต์ข ์ถ๋ ฅ์ ์ ์ฉํ์.
const convolver = ctx.createConvolver();
Analyser
๋ถ์ ๋ฐ ์๊ฐํ ๋ชฉ์ ์ผ๋ก ์ค์๊ฐ ์ ๋ณด๋ฅผ ์ถ์ถ
const analyser = ctx.createAnalyser();
MediaElementAudioSourceNode
์์์ผ๋ก ์ ๋ ฅ๋์ด ์๋ Audio์ ์ถ๋ ฅ์ ์๋์ผ๋ก ํธ๋ํนํ๋ค.
const mediaElementSource = ctx.createMediaElementSource(audio);
Last updated