WEB-AUDIO-API를 이용한 음원 시각화 세팅하기
안녕하십니까 히든트랙에서 front-end를 담당한 정재민이라고 합니다.
저는 WEB-AUDIO-API를 이용한 음원 시각화 구현을 주제로 기술 발표를 진행하겠습니다.
발표 순서입니다.
WEB-AUDIO-API
AudioContext
createMediaElementSource
createAnalyser 순으로 발표하겠습니다.
HTML5에서는 <audio> Element를 이용해서 음악 파일을 재생할 수 있습니다.
controls를 세팅할 경우 각각의 브라우저마다, 사용자에게 GUI를 제공하여,
play / pause / stop 제어를 돕습니다.
하지만 audio Element에서 제공하는 기능만으로는 audio를 복합적으로 제어하기 힘듭니다.
그래서 저는 WEB-AUDIO-API를 이용하였습니다.
WEB-AUDIO-API란?
Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다.
Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나,
오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.
Web Audio API는 오디오 컨텍스트 내부의 오디오 조작을 핸들링하는 것을 포함하며,
모듈러 라우팅을 허용하도록 설계되어 있습니다.
기본적인 오디오 연산은 오디오 노드를 통해 수행되며,
오디오 노드는 서로 연결되어 오디오 라우팅 그래프를 형성합니다.
서로 다른 타입의 채널 레이아웃을 포함한 다수의 오디오 소스는
단일 컨텍스트 내에서도 지원됩니다.
이 모듈식 설계는 역동적이고 복합적인 오디오 기능 생성을 위한 유연성을 제공합니다.
Web audio api의 다양한 기능중 오디오 시각화를 위해 사용해봅시다.
AudioContext
먼저 AudioContext를 이용해 새로운 AudioContext 객체를 생성하고 반환합니다.
AudioContext 객체는 부모 인터페이스인 BaseAudioContext로부터 속성을 상속받습니다.
또한 부모 인터페이스인 BaseAudioContext로부터 메서드를 상속받습니다.
AudioContext는 state를 가지고 있습니다.
suspended는 중지
running은 실행 중
closed은 닫힘을 의미합니다.
resume()메서드와 suspend()메서드로 Context 상태를 변경할 수 있습니다.
또 출력 위치를 나타내는 Destination 를 가지고 있는데 이는 스피커로 기본 설정 되어있습니다.
AudioContext.createMediaElementSource
AudioContext의 createMediaElementSource메서드는
인자로 audio객체나 audio tag를 받습니다.
이는 AudioContext의 새 MediaElementAudioSourceNode를 만드는 데 사용됩니다.
Audio 생성자를 이용해 Audio 객체를 생성시켜준 다음
mp3파일을 src값에 할당시켜줍니다.
저희 프로젝트에서는 s3버킷에서 받아온 mp3파일 url을 src값에 할당시켜주었습니다.
여기서 생각지못한 에러를 발견했는데,
바로 오디오 재생시 발생했던 cors 에러 입니다.
구글링해본 결과 해당 오류는
오리진에서 "Access-Control-Allow-Origin" 헤더 반환이 이루어지지 않아 발생하는 문제였습니다.
이 문제를 해결하기 위해서 우선은 s3버킷의 cors 설정을 해주었습니다.
그리고 audio 객체의 속성인 crossOrigin의 값을 use-credentials로 설정시켰습니다.
그다음, 헤더를 전송하기 위해 mp3파일 url에 get요청을 보냈습니다.
그이후로 응답으로 받은 mp3파일 url을 audio객체 src값을 할당시키니
더이상 cors 에러가 발생하지 않았습니다.
AudioContext.createAnalyser
AudioContext의 createAnalyser 메서드는
오디오 시간 및 주파수 데이터를 노출하고 데이터 시각화를 만드는 데 사용됩니다.
Analyzer 노드를 이전에 생성한 MediaElementAudioSourceNode에 연결 시키고,
AudioContext의 destination을 Analyzer 노드에 연결 시킵니다.
AnalyserNode.fftSize를 설정해줍니다.
이 값은 오디오의 주파수 값을 나타내는 특수 속성입니다
기본값은 2048이고, 다음과 같은 값으로 설정이 가능합니다.
저는 512로 설정해줬습니다.
AnalyserNode.frequencyBinCount
AnalyserNode의 frequencyBinCount 속성은 fftSize 값의 절반값 정수입니다.
이는 시각화를 위해 처리해야 하는 데이터 값의 수와 동일합니다.
앞서 fftSize를 512로 설정하였으니, frequencyBinCount는 256으로 설정됩니다.
데이터 배열을 변수를 생성하고 Unit8Array에 frequencyBinCount를 전달해줘 새롭게 형식화 된 배열을 저장합니다.
이렇게 하면 음원 시각화 준비가 모두 끝났습니다.
저는 canvas 태그에 주파수 값들을 전달하여 시각화 막대를 그렸습니다.
canvas 태그의 width와 heigth값을 window inner width heigth 값으로 설정해주었고,
시각화 막대는 웹 정중앙에서 원의 형태로 생성되도록 세팅하였습니다.
색상과 블러, 그리고 시각화 막대의 width값등을 설정 해주었고,
음원 정보를 나타내는 이미지도 웹 정중앙에 그려지도록 하였습니다.
마지막으로 requestAnimationFrame 메서드를 이용해
초당 60번의 빠른속도로 주파수 값을 전달해줬습니다.
결과적으로 주파수 값에 따라 시각화 막대가 움직이는 애니메이션을 만들어줬습니다.
이상으로 WEB-AUDIO-API를 이용한 음원 시각화 세팅하기 발표를 마치겠습니다.
감사합니다.
