본문으로 건너뛰기
黯羽轻扬매일 조금씩

Web Audio API 해석

무료2015-08-06#HTML#JS#音频数据分析#音频可视化#过滤特定频率#混响#音频空间化#处理声道#扭曲#合成音效#同时播放多个音频#多个音频交叉播放#音频淡入淡出

audio 태그는 충분히 강력하지 않아 오디오 제어를 강화하기 위해 Web Audio API 를 제공하며, 오디오 데이터 분석, 데이터 시각화, 특정 주파수 필터링, 리버브, 오디오 공간화, 채널 처리, 왜곡, 합성 사운드 등 강력한 기능을 지원합니다

서론

본문 내용은 AudioContext - Web API 接口 | MDN 에서 정리한 것으로, 오래되었을 수 있으니 시간을 주의하십시오（2015-06-24）

一.Web Audio API 각 노드의 관계

[caption id="attachment_694" align="alignnone" width="300"]Web Audio API 각 노드 간의 관계 Web Audio API 각 노드 간의 관계[/caption]

二.Web Audio API 의 역할

###1.audio 태그로도 구현 가능한 기능

  • 여러 오디오 동시 재생

  • 여러 오디오 교차 재생 (동시 재생을 기반으로 제어 추가)

  • 볼륨 조절 (게인 값 조절)

  • 페이드인/페이드아웃 (상동)

###2.특색 기능

  • 오디오 시간, 주파수 획득, 데이터 시각화 구현 (음성 재생: http://mdn.github.io/voice-change-o-matic/)

  • 특정 주파수 필터링 (필터, 로우패스 필터, 하이패스 필터, 밴드패스 필터, 로우쉘프 필터, 하이쉘프 필터, 피킹 필터, 노치 필터, 올패스 필터. 로우패스 필터는 저주파수 대역폭을 확보하고 고주파수 대역의 음파를 폐기)

  • 리버브 효과 (에코)

  • 오디오 공간화

  • 오디오 스트림 내 각 채널에 액세스하여 개별 처리

  • 스테레오 효과

  • 비선형 왜곡 효과

  • 사운드 생성 (전자 오르간 시뮬레이션: http://cool.techbrood.com/fiddle/5644)

三.Web Audio API 개요

###AudioContext

####Properties

  • AudioContext.currentTime

설명: double 초를 반환합니다. AudioContext 는 생성되면 0 부터 카운트 시작

역할: 오디오 재생에 사용. 예: source.start(time); 의 time 파라미터

  • AudioContext.destination

설명: AudioDestinationNode 형 객체를 반환합니다. AudioContext 내 모든 노드의 최종 노드를 나타내며, 일반적으로 오디오 출력 장치 (예: 스피커)

역할: 일련의 노드를 AudioContext.destination 에 연결해야 소리가 납니다

  • AudioContext.listener

설명: AudioListener 객체를 반환합니다

역할: 【3D 오디오 공간화 (3D audio spatialization) 구현】

  • AudioContext.mozAudioChannelType

설명: 비표준, 호환성이 나쁘며, 사용 비권장

역할:

  • AudioContext.sampleRate

설명: 부동 소수점을 반환합니다. 샘플링 레이트를 나타냅니다

역할: 같은 AudioContext 내 모든 노드의 샘플링 레이트는 같으므로 샘플링 레이트 변환은 지원되지 않습니다

####Methods

  • AudioContext.close()

설명: AudioContext 를 닫고 모든 오디오 리소스를 강제로 해제

역할: 닫은 후 노드를 생성할 수 없지만 오디오 디코딩, buffer 생성은 가능

비고: https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/close

  • AudioContext.createAnalyser()

설명: AnalyserNode 객체를 반환합니다

역할: 【오디오 시간, 주파수 획득, 데이터 시각화 구현 (스펙트럼図?)】

  • AudioContext.createBiquadFilter()

설명: BiquadFilterNode 객체를 반환합니다

역할: 2 차 필터. 일반적인 유형의 필터로 설정 가능

  • AudioContext.createBuffer()

설명: 빈 AudioBuffer 객체를 반환합니다

역할: 오디오 데이터를 저장하고 AudioBufferSourceNode 객체로 재생

  • AudioContext.createBufferSource()

설명: AudioBufferSourceNode 객체를 반환합니다

역할: AudioBuffer 내 오디오 데이터 재생

  • AudioContext.createChannelMerger()

설명: ChannelMergerNode 객체를 반환합니다

역할: AudioContext.createChannelSplitter() 와 연동하여 채널 조작. 여러 오디오 스트림의 채널을 단일 오디오 스트림으로 통합

  • AudioContext.createChannelSplitter()

설명: ChannelSplitterNode 객체를 반환합니다

역할: 【오디오 스트림 내 각 채널에 액세스하여 개별 처리】. 일반적으로 AudioContext.createChannelMerger() 와 연동

  • AudioContext.createConvolver()

설명: ConvolverNode 객체를 반환합니다

역할: 【오디오에 리버브 효과 추가】

  • AudioContext.createDelay()

설명: DelayNode 객체를 반환합니다

역할: 지연 설정. 기본 파라미터는 0 초

  • AudioContext.createDynamicsCompressor()

설명: DynamicsCompressorNode 객체를 반환합니다

역할: 오디오 신호 압축에 사용

  • AudioContext.createGain()

설명: GainNode 객체를 반환합니다

역할: 【전체 볼륨 제어】

  • AudioContext.createJavaScriptNode()

설명: 폐지됨

역할:

  • AudioContext.createMediaElementSource()

설명: 새로운 MediaElementAudioSourceNode 객체를 반환합니다

역할: 페이지의 기존 audio 또는 video 요소에서 데이터 획득

  • AudioContext.createMediaStreamDestination()

설명: WebRTC MediaStream 과 연관된 MediaStreamAudioDestinationNode 객체를 반환합니다

역할: 오디오 스트림을 나타내며, 로컬 파일로 저장하거나 다른 컴퓨터로 전송 가능

비고: Web RTC 는 네트워크 실시간 통신으로, 브라우저 간 audio/video 데이터 공유를 구현. 네이티브 API 지원이 있으며 서드파티 플러그인에 의존하지 않습니다. 상세: https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC

  • AudioContext.createMediaStreamSource()

설명: 새로운 MediaStreamAudioSourceNode 객체를 반환합니다

역할: MediaStream 객체 파라미터가 필요. 예: navigator.getUserMedia 인스턴스

  • AudioContext.createOscillator()

설명: OscillatorNode 객체를 반환합니다

역할: 주기 파형을 나타내며, 주로【일정한 톤 (항음?) 생성】��� 사용

  • AudioContext.createPanner()

설명: PannerNode 객체를 반환합니다

역할: 입력 오디오 스트림을 3 차원 공간에 공간화

  • AudioContext.createPeriodicWave()

설명: PeriodicWave(주기 파형) 생성

역할: 주기 파형 정의, OscillatorNode 출력 형성

  • AudioContext.createScriptProcessor()

설명: ScriptProcessorNode 객체를 반환합니다

역할: 오디오 직접 처리

  • AudioContext.createStereoPanner()

설명: StereoPannerNode 객체를 반환합니다

역할: 【스테레오 효과】구현. 입력 오디오 스트림을 등멱 평행 이동 알고리즘으로 스테레오 이미지에 위치

  • AudioContext.createWaveShaper()

설명: WaveShaperNode 객체를 반환합니다

역할: 【비선형 왜곡 효과】구현

  • AudioContext.createWaveTable()

설명: 폐지됨

역할:

  • AudioContext.decodeAudioData()

설명: ArrayBuffer 내 오디오 파일 데이터를 비동기로 디코딩

역할: ArrayBuffer 는 일반적으로 XMLHttpRequest 의 response(송신 시 responseType 속성을 arraybuffer 로 설정하면 arraybuffer 형 응답 반환)

비고: 반환 값은 xhr.response 이지 xhr.responseText 가 아님

####Related pages for Web Audio API

  • AnalyserNode

설명: 분석 노드

역할: 실시간 주파수 및 시계열 분석 정보 제공. 데이터만 획득하고 입력은 변경하지 않음

비고: 시계열 분석은 신호 관련 용어. 시계열 내에서 신호의 필터링, 증폭, 통계 특징 계산, 상관 분석 등 처리를 총칭하여 신호의 시계열 분석이라 함.

  • AudioBuffer

설명: 오디오 버퍼

역할: AudioContext.decodeAudioData() 또는 AudioContext.createBuffer() 로 생성 가능. 버퍼에 저장 후 AudioBufferSourceNode 로 재생 가능

  • AudioBufferSourceNode

설명: 오디오 버퍼 소스 노드

역할: AudioBuffer 내 데이터를 오디오 신호로 변환

비고: AudioBufferSourceNode 는 한 번만 재생 가능. AudioBufferSourceNode.start() 도 한 번만 호출 가능. AudioBufferSourceNode 는 재사용 불가 (여러 번 재생하려면 여러 AudioBufferSourceNode 생성 필요). 단 AudioBuffer 는 재사용 가능

  • AudioChannelManager

설명: 비표준. 현재 FF 만 지원. 사용 비권장

역할:

  • AudioDestinationNode

설명: 오디오 데스티네이션 (출력) 노드

역할: AudioContext 내 모든 노드의 종점을 나타내며, 일반적으로 장치의 스피커

비고: 입력 채널 수에 제한 있음. maxChannelCount 를 초과하면 예외 발생. 아마 6

  • AudioListener

설명: 오디오 리스너. 사람의 위치와 방향을 나타냄

역할: 오디오 공간화에 사용. AudioContext 내 모든 PannerNode 는 AudioListener 에 공간화되어 AudioContext.listener 속성에 저장

  • AudioNode

설명: 오디오 노드

역할: 최상위 추상 인터페이스. 상속 관계는 이미지 rel.png 참조

  • AudioParam

설명: 오디오 파라미터

역할: 오디오 관련 파라미터를 나타냄. 일반적으로 AudioNode 의 파라미터. 예: GainNode.gain

  • AudioProcessingEvent

설명: 폐지 예정. Audio Workers 로 대체

역할:

  • BiquadFilterNode

설명: 쌍이차 필터

역할: 단순한 저차 필터. AudioContext.createBiquadFilter() 로 생성 가능

  • ChannelMergerNode

역할: 채널 머저 노드

설명: ChannelSplitterNode 와 연동하여 다른 모노럴 입력을 단일 출력으로 통합

비고: 각 채널을 개별 처리하는 데 사용. 예: 채널 믹스 구현

  • ChannelSplitterNode

설명: 채널 스플리터 노드

역할: ChannelMergerNode 와 연동하여 오디오 소스의 각 채널을 한 세트의 모노럴 출력으로 분리

비고: 상동

  • ConvolverNode

설명: 컨볼버 노드

역할: 선형 컨볼루션 구현. 일반적으로 리버브 효과 구현에 사용

비고: 컨볼루션 리버브는 오디오의 공간감 (홀감?) 을 강화. 복잡한 알고리즘으로, 비교적 큰 오버헤드가 발생할 수 있음

  • DelayNode

설명: 딜레이 노드

역할: 입력에서 출력까지의 지연 설정

  • DynamicsCompressorNode

설명: 다이나믹스 컴프레서 노드

역할: 압축 효과 구현. 클리핑 왜곡 방지. AudioContext.createDynamicsCompressor 로 생성

비고: 【음악 제작 및 게임 오디오에서 자주 사용】

  • GainNode

설명: 게인 노드

역할: 볼륨 조절에 사용. 채널 수는 변경하지 않음

  • MediaStreamAudioDestinationNode

설명: 미디어 스트림 오디오 데스티네이션 (출력) 노드

역할: 단일 오디오 스트림 미디어 트랙 (AudioMediaStreamTrack) 을 포함하는 WebRTC MediaStream 의 오디오 데스티네이션을 나타냄. Navigator.getUserMedia 로 생성 가능

  • MediaStreamAudioSourceNode

설명: 미디어 스트림 오디오 소스 노드

역할: WebRTC MediaStream(예: 네트워크 카메라 및 마이크) 을 포함하는 오디오 소스를 나타냄. 오디오 소스와 유사한 AudioNode

  • NotifyAudioAvailableEvent

설명: 비표준. 호환성이 나쁘며, 사용 비권장

역할:

  • OfflineAudioCompletionEvent

설명: 오프라인 오디오 완료 이벤트

역할: OfflineAudioContext 처리 종료 시 트리거

  • OfflineAudioContext

설명: 오프라인 오디오 컨텍스트

역할: 모든 AudioNode 를 연결하는 오디오 처리 그래프를 나타냄

비고: OfflineAudioContext 는 장치 하드웨어를 렌더링하지 않고 최대한 빨리 처리를 완료하여 AudioBuffer 로 출력

  • OscillatorNode

설명: 오실레이터 노드

역할: 주기 파형 (예: 정현파) 을 나타냄. 지정된 주파수의 정현파를 생성하며 톤은 일정

  • PannerNode

설명: 패너 노드

역할: 공간 내 오디오 신호원의 위치와 동작을 나타냄

비고: 오른손 데카르트 좌표계로 위치를 기술. 속도 벡터와 방향 원뿔로 운동을 나타냄. Pan 은 성상, Phase 는 위상. 성상이란 음장 내 악기의 발음 위치점. 간단히 말해 소리의 방향, 왼쪽인지 오른쪽인지.

  • ParentNode

설명: 부모 노드

역할: 특수한 Node. 자식을 가질 수 있음

비고: ParentNode 는 추상 DOM 노드. 생성 불가. Element, Document, DocumentFragment 객체가 구현

  • PeriodicWave

설명: 주기 파형

역할: 주기 파형 정의. OscillatorNode 출력 형성에 사용 가능

  • ScriptProcessorNode

설명: 스크립트 프로세서 노드

역할: js 로 오디오 생성, 처리, 분석 구현. InputBuffer 와 OutputBuffer 의 2 개 Buffer 포함

  • StereoPannerNode

설명: 스테레오 패너 노드

역할: 오디오 플로우를 왼쪽 또는 오른쪽으로 팬. 저비용 등가 알고리즘으로 오디오 플로우를 스테레오 이미지에 배치

  • WaveShaperNode

설명: 웨이브 셰이퍼 노드

역할: 비선형 왜곡 증폭기. 분명한 증폭 효과 구현 외에 신호에 따뜻함을 추가하는 데 자주 사용

댓글

아직 댓글이 없습니다

댓글 작성