오디오 재생 프로그램 만들기

웹에서 오디오를 녹음하고, 재생하는 등 오디오 파일을 관리하는 프로그램을 만들었다.

다소 생소해서 이걸 프론트엔드가 한다고? 라고 생각했던 것 같다.

 

오디오 태그나 관련 라이브러리는 가능한 사용하지 않으려고 했는데

구현을 못하는 것보단 기한을 맞추는 게 더 중요하다고 생각해서 결국 우당탕탕 만들었다.

 

 

화면은 크게 녹음/리스트/재생으로 나눌 수 있는데, 기능을 완전히 분리할 수 없어서 팀원들과 역할을 나누기 어려웠다. 그래서 전반적으로 한 명이 틀을 만들고, 다른 한 명이 틀을 기반으로 기능 추가, 남은 한 명이 디벨롭 및 UI 수정하는 것으로 계획을 세웠다. 그 중에서 난 마지막의 UI 담당이었다. tailwind css 써 본 동기들이 강추를 해서 이번 프로젝트에서 도입해보았는데 직관적이고 사용하기 편해서 좋았다. 하지만 3일이 채 안 되는 시간 안에 완성하려니 다소 빡센 일정이었다.

 

 

 

위 디자인은 어느 정도 틀을 잡아 놓은 거지, 이대로 완성하고 싶지 않았는데 아쉬웠다.

하지만 내가 계속해서 기능을 추가하고 디자인도 수정할 수 있는 거니까!

 

 

 

내가 구현한 기능은 파일 다운로드였다. 리스트에 있는 파일 중 다운로드 버튼을 누르면 해당 파일을 음성파일 형태로 다운로드가 가능하게끔 구현해야했다. 

아무래도 틀을 다른 사람이 넣다보니 코드를 이해하고 분석하고, 선택한 파일을 어떻게 알 수 있을지 콘솔을 엄청 찍어봤다.

const clickDownloadBtn = index => {
    const url = URL.createObjectURL(audioDataList[index].data);
    const a = document.createElement('a');
    a.href = url;
    a.download = `음성녹음.mp3`;
    a.click();
    a.remove();
  };

 

그런데 위와 같이 코드를 쳤는데 

 

 

자꾸 data를 못 읽어오는 거... 🤦🏻‍♀️

 

 

콘솔로 audioDataList를 찍어봐도 데이터가 잘 들어오고 있는데?

혹시 index가 문제인가? 싶어서 [index]에 0을 넣어보니 정상적으로 저장이 되는 것이었다!!!!!!!!!!!

 

 

 

알고보니

<button onClick={() => clickDownloadBtn(index)}>다운로드</button>

매개변수로 index를 넣어줬어야 하는데 빈 값으로 둔 거임...

별 것도 아닌 걸로 왜 이렇게 삽질을 하는지 모르겠다.

 

 

 

프로젝트하면서 느낀 점

사실상 이번 프로젝트를 하면서 내가 부족한 점만 엄청 느낀 것 같다. setTimeout 함수가 실시간 변하는 값을 받지 못해 문제가 된다는 것도 몰랐고, 비동기 처리나 state 관리가 타이머를 지연시키는 것 같은데 정확히 뭐가 문제고 어떻게 해결해야할지 갈피를 잡기 어려웠다. 기초 부족의 문제를 느끼며... 강의 들으러 가야겠다.

 

 

 

깃헙 링크 : https://github.com/seungyeon-rr/HAII_Voice_Recorder

배포 링크 : https://comforting-choux-3f20d5.netlify.app