visualizer 구현

진짜 visualizer를 찾아서..

visualizer를 가장 처음에 만들었으나
이는 그냥 웹 오디오 플레이어에 지나지 않았다.
오디오 시각화를 구현하기 위해 전에 봐뒀던
react-audio-spectrum을 설치해봤다.

이게 되긴 되는데..
src값에 오디오 파일을 직접 할당시켜야 작동한다.
우리 프로젝트에서는 오디오 파일을 s3버킷에 저장시킨
url값으로 실행시키는데 이를 src값에 주면 cors 에러가 난다.

구글링을 해보니 s3버킷 권한 설정에 CORS 설정이 있다고 한다.
다음과 같이 입력해봤지만 똑같이 cors 에러가 났다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

계속 삽질하다 된다고 해도 솔직히 내가 생각했던 모양새가 아니라
우선 pass하고 다른 모듈을 찾아봤다.

진짜 마음에 드는 visualizer를 찾았지만 이는 아쉽게도
마이크 소리에 맞춰서 반응하도록 되어있었다.

코드를 고쳐보려해도 어떻게 돌아가는건지 생전 처음보는 메소드들이 보였다.

또 다른 모듈들을 다운받고.. 실행하고.. 실패하고를 반복..
그러다가 공통점을 발견했는데, 모두 AudioContext와 canvas를 사용한다는점이다.

---

오늘은 여기까지..

Music player처럼 visualizer도 모듈을 사용해보려 했으나 생각보다 쓸만한게 안보였다.
아니, 내가 아직 부족한 탓인가? 클론받은 모듈 소스코드를 실행조차 못했다.
그래도 아예 수확이 없는것은 아니다.
모듈 소스코드들의 공통점을 발견했으니 이게 뭔지 알아봐야겠다.