[JavaScript] 음악 플레이리스트 (2) 사운드 스펙트럼, 에러 극복기

분명히 어제까지 잘 되던 사이트가 오늘 아침부터 소리가 안나기 시작했다. 처음에는 단순 렉이겠거니 싶었는데 핸드폰으로 들어가도 안나오고 시간이 지나도 소리가 나지 않자 뭔가 문제가 생긴 것 같아 한참 문제를 찾았다. 

 

그런데 코드도 짧아서 에러 나올 곳도 없고 콘솔창도 깨끗하고 심지어는 가끔씩 될 때도 있었다. 그래서 대체 왜 그런가 찾아봤더니 mp3 파일의 용량 문제였다... 파일을 압축해서 다시 호스팅 하니 잘 되는 것을 볼 수 있었다. 그런데 분명히 이 글 시작할 때까지만 해도 잘 되던게 지금 또 안되기 시작했다. 

 

+ 한참 또 찾아보았는데 도저히 왜 안되는지 모르겠다. 이제는 파일 크기도 1.6메가로 작고 콘솔에 내가 출력하는 audio.src를 찍어봤는데 해당 경로로 들어가면 노래가 나온다. 더 짜증나는건 핸드폰으로 들어가면 노래가 나온다. 

 

+ 진짜 화가나고 왜 안되는지 모르겠는데 지금 또 갑자기 된다. 근데 로컬에서만 된다 ㅋㅋ 아오!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

---

아무튼 이 이슈는 모르겠고 오늘은 스펙트럼을 추가했다. 원래는 프로그래스바랑 리스트까지 다 만들어보려고 했는데 저 에러때문에 시간을 다 뺏겼다. 

 

미리보기

 

이 스펙트럼은 webAPI AudioContext 를 사용해서 음원의 데이터를 값으로 리턴하면 그 값대로 바의 길이를 조절한다. 값은 최대 255로 나오기 때문에 나는 바의 길이를 줄이기 위해 나누기 5 를 해주었다. 

 

requestAnimationFrame

웹 애니메이션을 보다 더 부드럽고 효율적으로 실행하도록 도와주는 JavaScript 함수이다. 애니메이션 만드는 코드를 이 함수로 감싸면 자신의 컴퓨터 사양에 맞게 브라우저가 해당 메서드를 호출한다. 

 

setInterval과의 차이점

마찬가지로 setInterval도 애니메이션을 렌더링하는 메서드와 자주 쓰인다. 하지만 setInterval은 일정시간마다 특정 작업을 실행하는 함수이다. 즉, 렌더링만을 위한 메서드가 아니다.

 

하지만 requestAnimationFrame는 화면 주사율에 맞는 값을 사용할 수 있으며 애니메이션만을 위한 메서드이므로 보다 부드러운 애니메이션 작업이 가능하다. 

 

 

+ 오류 관련 음원을 바꿀 때마다 계속해서 요청을 보낸다. 그래서 캐싱 문제로 인한 메모리 문제인가 했는데 그것도 아니다. 진짜 마지막으로 오디오 컨텍스트가 현재 즉시실행 함수안에 있어서 크롬에서 막은것 같기도 하다. 이거 안되면 그냥 때려치고 로컬에서나 써야겠다