220922 TIL 소리를 들려줘..

월요일에 뽀그로 타이머 퀘스트를 보고 기본적인 요구사항조차 완성시킬 수 있을지 의문을 가진채 시작을 했는데 오늘 드디어 작동을 하는 타이머를 겨우 만들었다. 하지만 아직 끝난 게 아니다....

진짜 어떻게든 작동하는 게 목표였기 때문에 코드가 개판인 게 내 눈에도 보인다... 그리고 나만의 기능도 만들어야 하고, 타이머 시간이 끝나면 알림음도 나게 해야 하는데 오디오가 들어가지 않는다... 

시간이 딱 지나면 오디오가 재생이 돼야 하는데 재생이 되지 않고 밑에 에러가 나온다.

 

 

Uncaught (in promise) DOMException: The element has no supported sources.

위의 에러 메시지를 구글링 해서 나오는 해결방법들을 여러 가지 시도를 해봤지만 소득이 없었다.

 

1. const audio = new Audio('../assets/clapping.mp3');

2. const audio = new Audio(required('../assets/clapping.mp3')) 

3. import sound from '../assets/clapping.mp3' 
   const audio = new Audio(sound)

오디오 파일을 불러오는 방법들 중에서 위의 3가지 방법들을 모두 시도해봤는데 1,2번은 여전히 위의 사진처럼 에러 메시지가 나오고,

3번 방법은 import 해오는 게 문제인지 밑에 사진 같은 오류가 나온다..

 

 

 

진짜 산넘어 산이다.. 

 

const audio = new Audio('https://vincens2005.github.io/vr/Nyan%20Cat%20[original].mp3');

근데 그중에 오디오가 재생이 되는 방법이 하나 있었는데 오디오 파일을 다운로드하여서 파일의 위치를 불러오는 게 아니라 오디오의 주소를 써주면 에러 메시지 없이 잘 재생이 되긴 하는데 내가 원하는 효과음의 오디오 주소를 얻는 게 문제이다...

 

그래서 일단 오디오를 맨 마지막에 해결하기로 하고, 나만의 기능을 구현하려고 했는데 어떤 걸 구현해야 할지 아이디어가 떠오르지 않아서 손 놓고 있는 것보다는 css라도 미리 해놓는 게 좋을 것 같아 미리 해놨는데 역시 꾸며야 보는 맛이 있다.

 

 

금요일까지 완성하는 게 목표였지만 달성하지 못했지만 처음에 아무것도 못했던 거에 비하면 많이 한 것 같다. 근데 아직 리팩터링 하기 전이라 생각보다 금방 만든 거 같은데 내 코드를 보면 고쳐야 할 부분이 한 두 군데가 아니라 눈앞이 막막하다..

그래도 월요일에는 퀘스트에 손도 못 대고 하루를 보냈던걸 생각하면 며칠 사이에 많은 걸 배우고 발전한 거 같다.

 

빨리 나만의 기능 구현하고 오디오 문제 해결하자