1. 2015.09.23 / 네이버

2. 박재성
https://www.flickr.com/photos/schtumple/11573410614/
Web Audio API

3. 1. Introduction
• audio tag
• Web Audio API
• Brief History
• 브라우저

4. 지원

5. 여부

6.
• Modular Routing
2. 인터페이스
3. 기본

7. 사용방법
4. How to use? : 다양한

8. 응용방법

9.
• Background music
• audio to Web Audio API
• Sound effects
• 3D Positional sound : AudioPannerNode
• Room effects and filters : ConvolverNode
• Detect clipping : JavaScriptNode
5. Somethig more
• Automation
• Oscillator
• 몇

10. 가지

11. 기억할

12. 것들
• More AudioNodes
Index

13. 1. Introduction

14. § 1950

19. CSIRAC

20. 호주의

21. 첫

22. 디지털

23. 컴퓨터이자,

28. 컴퓨터로

29. 음악을

30. 만든

31. 첫

32. 번째

33. 컴퓨터

38. à

39. hps://en.wikipedia.org/wiki/CSIRAC
§ 1951

44. 맨체스터

45. 대학교의

46. ‘Ferranti

47. Mark

48. 1’은

49. 음악을

50. 녹음하기

51. 위해

56. 사용된

57. 첫

58. 번째

59. 컴퓨터

61.
§ 1957

66. 벨연구소의

67. Max

68. Mathews는

69. 처음으로

70. 컴퓨터

71. 프로그램을

72. 통해

73. 디지털

82. 오디오

83. 파형을

84. 만들어

85. 내었고,

86. 이후

87. 컴퓨터

88. 음악

89. 프로그램들에

90. 많은

95. 영향을

96. 끼우침

98.
§ 1961

99.
IBM

100. 7090은

101. 노래를

102. 부른

103. 첫

104. 번째

105. 컴퓨터

106.
History of Computer Music

107. CSIRAC

109. § 1970

110. ~

116. FM

117. 합성의

118. 개발

119. :

120. https://ask.audio/articles/a-brief-history-of-fm-synthesis/ko

122.
§ 1982

127. 코모도어

128. 64가

129. 발표되었고,

130. 8비트

131. 컴퓨터들에서

132. 실행되던

133. 게임들을

134. 통해

139. 컴퓨터

140. 사운드가

141. 보편화됨

143.
§ 1983

144.
MIDI

145. (Music

146. Instrument

147. Digital

148. Interface)

149. 표준

150. 제정되면서,

151. 음악

152. 기기들

153. 및

154.
컴퓨터

155. 간의

156. 통신이

157. 가능해짐

159.
§ 1987

160.
코모도어

161. 아미가

162. 500

163. 발표

168. 컴퓨터

169. 음악을

170. 위한

171. 플랫폼으로

172. 발전

174.
§ 1990

175. ~

180. 다양한

181. 컴퓨터

182. 음악

183. 프로그램들이

184. 등장

186.
http://music.columbia.edu/cmc/MusicAndComputers/

187.
http://slidedeck.io/darraghenright/slides

188. /

189. https://www.youtube.com/watch?v=vIKijPAW9Js

190.
History of Computer Music

191. Commodore

192. Amiga

193. 500

195. History of Computer Music
사운드

196. 카드?

198.
컴퓨터의

199. 디지털

200. 신호를

201. 오디오로

202. 변환해

203. 주거나

204. 반대로

205. 아날로그

206. 오디오를

207. 디지털

208.
신호로

209. 변환해

210. 주는

211. 모듈로

212. 컴퓨터

213. 확장슬롯을

214. 통해

215. 장착해

216. 사용됨

218.
• AdLib

219.
• Sound

220. Blaster

221.
• 옥소리

222.
• Etc.

224. 이미

225. HTML5

226. audio

227. 태그를

228. 통해

229. 사운드를

230. 재생할

231. 수

232. 있다.

234.
audio controls loop
source src=“music.wav
/audio

235.
• 로딩과

236. 디코딩에

237. 대한

238. 별도의

239. 작업

240. 없이

241. 스트리밍으로

242. 재생가능

243.
• 다양한

244. 재생

245. 컨트롤

246. API

247. 제공

248. (음량

249. 조절,

250. 재생시간

251. 조절,

252. etc)

253.
• Media

254. event를

255. 통한

256. 다양한

257. 이벤트

258. 처리

259.
audio tag : 웹에서의

260. 사운드

261. 그러나…⋯

262.
• 사운드

263. 시그널에

264. 필터를

265. 적용할

266. 수

267. 없다.
• Raw PCM 데이터

268. 접근이

269. 불가능

270. 하다.
• 청취자에

271. 대한

272. 개념이

273. 없기

274. 때문에, 음향에

275. 대한
공간

276. 및

277. 방향

278. 설정

279. 자체가

280. 불가능

281. 하다.
audio tag : 한계

282. § 웹

283. 어플리케이션에서

284. 오디오

285. 데이터를

286. 프로세싱

287. 하거나

288. 합성할

289. 수

290. 있는
하이레벨(High-level) JavaScript API.
à Specification : hps://dvcs.w3.org/hg/audio/raw-­‐file/?p/webaudio/specifica?on.html
§ AudioContext는

291. 모든

292. 사운드

293. 데이터를

294. 관리

295. 및

296. 재생한다.
§ 음향

297. 데이터가

298. 최종적으로

299. 송출

300. 되려면

301. 사운드

302. 소스는, AudioContext 인스턴스와
연결

303. 되어야

304. 한다.
Web Audio API?

305. //
1.
Audio
Context
생성
var
context
=
new
AudioContext();
// 2. 사운드

306. 소스

307. 생성

308.
var source = context.createBufferSource();
source.buffer = AudioBuffer_데이터;
// 3. 소스를

309. 스피커와

310. 연결

311. (또는

312. 다른

313. 모듈과

314. 연결)
source.connect(context.destination);
Web Audio API? : First step

315. § Google과

316. Mozilla는

317. 서로

318. 다른

319. 2개의

320. 초안을

321. 제안

322. (2011/12/15)
à Google : Web Audio API
- 하이레벨

323. 함수(이미

324. 기능들이

325. 정의된) 제공

330. à Mozilla : MediaStream Processing API(Audio Data API)
- 로우레벨

331. 접근
- audio 태그

332. 기반
hp://wiki.mozilla.org/Audio_Data_API
Brief History of Web Audio

333. § Chrome
§ Firefox
§ Android 5+ WebView
§ iOS Safari 6.1+ (with webkit prefix)
§ MS Edge 12+
브라우저

334. 지원

335. 여부
hp://caniuse.com/#search=web%20audio

336. § 연결은

337. 꼭

338. 스피커와

339. 직접적일

340. 필요는

341. 없으며, 중간에

342. 여러

343. 단계의

344. AudioNode
들과

345. 연결(Modular Routing)되어

346. 파이프

347. 라이닝

348. 될수

349. 있다.
§ 이를

350. 통해

351. 중간

352. 단계의

353. AudioNode를

354. 통해

355. 음량

356. 조정, 필터

357. 적용

358. 등을

359. 처리

360. 하
게

361. 된다.
Modular Routing

362. 2. 인터페이스

363. § 모듈(노드)을

364. 의미하며, 각

365. 모듈들은

366. 특별한

367. 기능을

368. 수행한다.
interface AudioNode : EventTarget {
void connect(AudioNode destination, optional unsigned long output = 0, optional unsigned long input = 0);
void connect(AudioParam destination, optional unsigned long output = 0);
void disconnect(optional unsigned long output = 0);
readonly attribute AudioContext context;
readonly attribute unsigned long numberOfInputs;
readonly attribute unsigned long numberOfOutputs;
// Channel up-mixing and down-mixing rules for all inputs.
attribute unsigned long channelCount;
attribute ChannelCountMode channelCountMode;
attribute ChannelInterpretation channelInterpretation;
};
à source.connect(destination_node);
인터페이스

369. : AudioNode

370. § 각각의

371. AudioNode들은

372. AudioParam 형식의

373. 메서드를

374. 갖으며, 이는

375. 자동화

376.
처리와

377. 관련된

378. 메서드를

379. 제공한다.
à hp://www.w3.org/TR/webaudio/#AudioParam
interface AudioParam {
attribute float value;
readonly attribute float defaultValue;
// Parameter automation.
void setValueAtTime(float value, double startTime);
void linearRampToValueAtTime(float value, double endTime);
void exponentialRampToValueAtTime(float value, double endTime);
// Exponentially approach the target value with a rate having the given time constant.
void setTargetAtTime(float target, double startTime, double timeConstant);
// Sets an array of arbitrary parameter values starting at time for the given duration.
// The number of values will be scaled to fit into the desired duration.
void setValueCurveAtTime(Float32Array values, double startTime, double duration);
// Cancels all scheduled parameter changes with times greater than or equal to startTime.
void cancelScheduledValues(double startTime);
};
인터페이스

380. : AudioParam

381. § 메모리에

382. 올려진

383. 디코딩된

384. 사운드

385. 데이터를

386. 의미한다.
à
hp://www.w3.org/TR/webaudio/#AudioBuffer
interface AudioBuffer {
readonly attribute float sampleRate;
readonly attribute long length;
// in seconds
readonly attribute double duration;
readonly attribute long numberOfChannels;
Float32Array getChannelData(in unsigned long channel);
}
인터페이스

387. : AudioBuffer

388. § AudioBuffer를

389. 한번

390. 재생할

391. 수

392. 있으며, 여러

393. 개의

394. 노드

395. 들은

396. 동일한

402.
AudioBuffer를

403. 가리킬

404. 수도

405. 있다.
à
hp://www.w3.org/TR/webaudio/#AudioBufferSourceNode
interface AudioBufferSourceNode : AudioSourceNode {
attribute AudioBuffer? buffer;
readonly attribute AudioParam playbackRate;
attribute boolean loop;
attribute double loopStart;
attribute double loopEnd;
void start(optional double when = 0, optional double offset = 0, optional double duration);
void stop(optional double when = 0);
attribute EventHandler onended;
};
var source = context.createBufferSource();
source.buffer = AudioBuffer_데이터;
source.loop = true | false; // 반복여부
인터페이스

406. : AudioBufferSourceNode

407. 3. 기본

408. 사용방법

409. // Audio Context 생성
var context = new AudioContext();
// 사운드

410. 소스

411. 생성

412.
var source = context.createBufferSource();
source.buffer = AudioBuffer_데이터;
§ 스피커와

413. 직접

414. 연결

415. :

416.
source.connect(context.destination);
§ gainNode

417. 연결

418. :

419.
var gainNode = context.createGain();
source.connect(gainNode);
gainNode.connect(context.destination);
§ GainNode를

420. Compressor와

421. 연결

422. :

423.
var compressor = context.createDynamicsCompressor();
gainNode.connect(compressor);
compressor.connect(context.destination);

424.
source.start(0); // play
기본

425. 사용방법

426. : 컨텍스트

427. 생성과

428. 루팅

429.
var request = new XMLHttpRequest();
request.open('GET', sUrl, true);
request.responseType = 'arraybuffer'; // 전송받을

430. data가

431. 바이너리이므로

432. arraybuffer로

433. 설정

437. // XHR load callback
request.onload = function() {
// 비동기

438. 디코딩

439. 된다. 디코딩이

440. 완료되면

441. 디코딩된

442. PCM audio data를

443. 사용할

444. 수

445. 있도록

446. 준비된다.
context.decodeAudioData(request.response,
// 로드

447. 콜백

448. 함수
function(buffer) {
...
},
// 에러

449. 콜백

450. 함수
function(e) {
console.log(e);
}
);
};
request.send();
기본

451. 사용방법 : 소스

452. 데이터

453. 로딩

454. 4. How to use? : 다양한

455. 응용방법

456. § 게임에서

457. 반복적이고

458. 예측

459. 가능한

460. BGM은

461. 불편과

462. 짜증을

463. 유발할

464. 수

465. 있다.
§ 특정

466. 시점(마지막

467. 보스와의

468. 대결과

469. 같은)에

470. BGM도

471. 그에

472. 따라

473. 감성적으로

474. 반영이

475.
되어야

476. 한다.
§ 여러

477. 사운드의

478. 믹싱은

479. 음악

480. 프로그램에서

481. 제공하는

482. 기본적인

483. 기능

484. 중

485. 하나이다.
§ Web Audio API를

486. 활용해

487. XHR로

488. 상황에

489. 맞는

490. 소스를

491. 로딩해

492. 재생할

493. 수

494. 있다.
à

495. 로딩은

496. 시간이

497. 소요되므로,

498. 최초

499. 페이지

500. 로딩시

501. 또는

502. 게임

503. 진행

504. 중

507.
점진적으로

508. 로딩을

509. 하도록

510. 한다.
Background music

511. § 사용될

512. 각

513. 노드들에

514. 대한

515. 소스를

516. 생성하고

517. 이를

518. 연결한다.

519.
§ 여러

520. 개의

521. 사운드가

522. 반복

523. 재생되는

524. 상태에서,

525. 특정

526. 장면에

527. 사용되는

528. 사운드의

529.
음량을

530. 키우고

531. 사용되지

532. 않는

533. 사운드의

534. 음량을

535. 줄여

536. cross-fade

537. 한다.

538.
Background music

539. § audio는

540. 소스를

541. 모두

542. 다운로드

543. 받지

544. 않아도

545. 실시간

546. 스트리밍으로

547. 재생

550. 된다.
§ 스트리밍

551. 소스를

552. Web Audio API와

553. 연결하면

554. 스트리밍을

555. 분석하거나

556. 조작할

557.
수

558. 있게

559. 된다.
§ audio를

560. Web Audio context로

561. 가져오는

562. 것도

563. 가능하다.
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(context.destination);
audioElement.play();
§ createAnalyser() creates a RealtimeAnalyserNode which provide real-time frequency and time-
domain analysis information.
à context.createAnalyser()를

564. 통한

565. equalizer graph 데모

566. :
http://html5-demos.appspot.com/static/webaudio/createMediaSourceElement.html
audio to Web Audio API

567. § 게임에서

568. 여러

569. 캐릭터가

570. 다수

571. 등장하는

572. 배틀

573. 장면인

574. 경우에는

575. 동시에

576. 수많은

577.
이펙트가

578. 재생될

579. 수

580. 있다.

581.
§ 동일한

582. 사운드

583. 재생을

584. 방지하기

585. 위해

586. 여러

587. 종류의

588. 사운드

589. 풀을

590. 준비해

591. 사용할

592.
수도

593. 있지만,

594. 모든

595. 상황을

596. 대비하도록

597. 구성하는

598. 것은

599. 어렵다.

600.
§ 동일한

601. 사운드를

602. 재생시점을

603. 다르게

604. 지정해

605. 풀을

606. 구성하지

607. 않고도,

608. 동일한

613. 이펙트를

614. 만들

615. 수

616. 있다.
// currentTime은 컨텍스트가 생성된 시점을 기준으로 0의 값으로 시작하며, 실시간 증가되는 값이다.
var time = context.currentTime;
for (var i = 0; i rounds; i++) {
var source = AudioBufferSource;
source.start(time + i * interval);
}
Sound effects : 재생

617. 시점이

618. 다른

619. 반복

620. 재생

621. § DelayNode를

622. 사용하면

623. 오디오

624. 시그널의

625. 통과를

626. 지연시킨다.
var delayNode = context.createDelay(),
now = context.currentTime;
delayNode.delayTime.setValueAtTime(0, now);
delayNode.delayTime.linearRampToValueAtTime(2, now + time);
Sound effects : 시그널

627. 지연

628. § BiquadFilterNode를

629. 사용해, 사운드

630. 시그널의

631. 주파수를

632. 필터링해

633. 주파수의
응답을

634. 변경할

635. 수

636. 있다.
var filter = context.createBiquadFilter();
source.connect(filter);
// 0:LOWPASS, 1:HIGHPASS, 2:BANDPASS, 3:LOWSHELF, 4:HIGHSHELF, 5:PEAKING, 6:NOTCH, 7:ALLPASS
filter.type = 0;
filter.Q.value = 12.06;
filter.frequency.value = 400;
filter.connect(context.destination);
Sound effects : 필터

637. § AudioPannerNode를

638. 활용해

639. 위치와

640. 공간을

641. 프로세싱

642. 한다.
var panner = context.createPanner();
// Directional model
panner.coneOuterGain = 0.5;
panner.coneOuterAngle = 180;
panner.coneInnerAngle = 0;
// Position, orientaion and velocity
panner.setPosition(x, y, z); // 3D cartesian coordinate relative to the listener attribute
panner.setOrientation(x, y, z); // pointing in the 3D cartesian coordinate space
panner.setVelocity(x, y, z); // direction of travel and the speed in 3D space
source.connect(panner);
panner.connect(context.destination);
3D Positional sound

643. § Positional model은

644. OpenAL(Open Audio Library)에

645. 기반한다.
à http://connect.creativelabs.com/openal/default.aspx
à Distance model은

646. 소스로부터의

647. 거리에

648. 따라

649. gain 값을

650. 다르게

651. 갖는다.
à Directional model은

652. 외부

653. 또는

654. 내부

655. 방향에

656. 따라

657. gain 값을

658. 다르게

659. 갖는다.
Demo:
hp://www.html5rocks.com/en/tutorials/webaudio/posi?onal_audio/posi?on.html
hp://www.html5rocks.com/en/tutorials/webaudio/posi?onal_audio/velocity.html
hp://www.html5rocks.com/en/tutorials/webaudio/posi?onal_audio/orienta?on.html
hp://www.html5rocks.com/en/tutorials/webaudio/posi?onal_audio/all_together.html
3D Positional sound

660. § 동일한

661. 소리를

662. 장소에

663. 따라

664. 다르게

665. 녹음된

666. 데이터를

667. 생성하는

668. 것은

669. 많은

673. 비용을

674. 필요로

675. 한다.
§ 동일한

676. 사운드가

677. 환경에

678. 따라

679. 다르게

680. 들리는

681. 것은

682. 임펄스

683. 응답(Impulse
Response)의

684. 차이라

685. 할

686. 수

687. 있다.
§ ConvolverNode를

688. 활용하면

689. 임펄스

690. 응답을

691. 간단히

692. 적용할

693. 수

694. 있다.
var source = context.createBufferSource();
source.buffer = AudioBufferSource;
var convolver = context.createConvolver();
convolver.buffer = AudioBufferSource; // 임펄스 데이터
source.connect(convolver);
convolver.connect(context.destination);
Room effects and filters

695. § 연결된

696. 많은

697. AudioNode의

698. 소리들이

699. normalize 되지

700. 않으면

701. 스피커

702. 송출

703. 용
량을

704. 넘어설

705. 수

706. 있다.
§ 특정

707. 채널의

708. 시그널이

709. 허용된

710. 범위를

711. 초과한

712. 경우

713. clipping이

714. 발생되며,
-1

715. 또는

716. 1의

717. 값으로

718. 표현된다.
§ 이를

719. 위해

720. ScriptProcessorNode를

721. 사용한다. ScriptProcessorNode는

722. audio
를

723. JavaScript에서

724. 직접

725. 생성,

726. 프로세스

727. 또는

728. 분석

729. 할수

730. 있게

731. 한다.
var meter = context.createScriptProcessor(
buffer_size,
number_input_channel,
number_output_channel
);
meter.onaudioprocess = function(e) {
…
}
Detect clipping

732. // Assume entire sound output is being piped through the mix node.
var mix = context.createGain();
var meter = context.createScriptProcessor(2048, 1, 1);
// Porcess audio event binding
meter.onaudioprocess = function (e) {
var leftBuffer = e.inputBuffer.getChannelData(0);
var rightBuffer = e.inputBuffer.getChannelData(1);
checkClipping(leftBuffer);
checkClipping(rightBuffer);
};
mix.connect(meter);
meter.connect(context.destination);
mix.connect(context.destination);
// Check if buffer exceeds
function checkClipping(buffer) {
var isClipping = false;
// Iterate through buffer to check if any of the |values| exceeds 1.
for (var i = 0; i buffer.length; i++) {
var absValue = Math.abs(buffer[i]);
if (absValue = 1) {
isClipping = true;
break;
}
}
}
Detect clipping

733. 5. Something more

734. § AudioNode의

735. AudioParam의

736. 메서드를

737. 이용해

738. 특정

739. 시간에

740. 다른

741. 값을

742. 같도록

743.
처리할

744. 수

745. 있다.
§ 음량조절을

746. 스케줄링하면, 페이드

747. 처리가

748. 자동으로

749. 발생하도록

750. 할수

751. 있다.
var now = context.currentTime;
//
지정된 시간에 특정 값을 갖도록 한다.
source.gain.setValueAtTime(0,
now);
//
특정 시간까지 값을 리니어하게 변경하도록 스케줄링 한다.
source.gain.linearRampToValueAtTime(1.0,
now
+
value);
source.gain.linearRampToValueAtTime(0.0,
now
+
value);
Automation

752. § 신디사이저에서

753. 일반적으로

754. 사용되는

755. oscillator를

756. 만들

757. 수

758. 있다.
§ Oscillator는

759. 반복되는

760. 파형(waveform)을

761. 생성할

762. 수

763. 있게

764. 한다.
var oscillator = context.createOscillator();
//
파형종류
0
:
sine
1
:
Square
2
:
Sawtooth
3
:
Triangle
oscillator.type
=
1;
//
주파수 설정
oscillator.frequency.value = 900; // hz
oscillator.connect(context.destination);
Oscillator
http://en.wikibooks.org/wiki/Sound_Synthesis_Theory/Oscillators_and_Wavetables

765. § 시그널이

766. 부드럽고

767. 튀지

768. 않도록

769. DynamicCompressorNode를

770. 활용하라.
§ 페이지가

771. 보이지

772. 않는

773. 경우에는

774. pageVisibility API를

775. 활용해

776. 불필요한

777. 사운드

778.
재생을

779. 막는

780. 것이

781. 좋다.
§ Web Audio API에서

782. 모든

783. 시간

784. 단위는

785. 밀리세컨드(millisecond)가

786. 아닌

787. 초
(second) 단위

788. 이다.
몇

789. 가지

790. 기억할

791. 것들

792. § AnalyserNode
à can be used to expose audio time and frequency data and create data visualisations.
§ WaveShaperNode
à
AudioNode
processor
implemen?ng
non-­‐linear
distor?on
effects.
§ AudioChannelSplitter / AudioChannelMerger
More AudioNodes
More
Nodes
:
hps://developer.mozilla.org/en-­‐US/docs/Web/API/Web_Audio_API#Web_Audio_API_Interfaces

793. § Firefox Web Audio Editor
à https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor
§ Web Audio API Editor Extension for Google Chrome
à https://github.com/spite/WebAudioExtension
개발도구

794. § Web Audio API Book
à http://chimera.labs.oreilly.com/books/1234000001552/index.html
§ Building a musical instrument with the Web Audio API
à https://www.youtube.com/watch?v=56spBAgOYfg
§ Getting started with Web Audio API
à http://www.html5rocks.com/en/tutorials/webaudio/intro/
§ W3C Web Audio Demo List
à http://webaudio.github.io/demo-list/
§ Web Audio Demos
à

795. http://webaudiodemos.appspot.com/
§ Web Audio Weekly
à http://blog.chrislowis.co.uk/waw.html
§ Synthesising Drum Sounds with the Web Audio API
à https://dev.opera.com/articles/drum-sounds-webaudio/
§ Web Audio Conference 2015
à http://wac.ircam.fr/program.html
§ Developing Game Audio with the Web Audio API
à http://www.html5rocks.com/en/tutorials/webaudio/games/
Reference

796. https://www.flickr.com/photos/petergorges/2682162158/