기업협업 2주차 1번째 과제 - 오디오 재생 프로그램 만들기

✅ 과제

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

 

1. 오디오 녹음 화면

• 오디오 녹음이 가능하다.
• 오디오 녹음 중일 때에는, 녹음 중 UI가 표시된다.
• 녹음 중에는 녹음이 되고 있는 시간을 표기한다.
• input 값을 받아 최대 녹음 가능 시간을 컨트롤 할 수 있어야 한다.
• 오디오 녹음 완료 후에는 firebase firestorage를 이용하여 음성 파일을 저장한다. (선택 구현 사항)

 

2. 음성 재생 화면

• 오디오 재생이 가능하다.
• 오디오가 재생된 시간을 표시한다.
• 오디오 파일을 다운로드 할 수 있다.
• 오디오 파형을 표시할 수 있다. (선택 구현 사항)

 

🗓 진행 기간 및 팀원

- 2022.10.11 ~ 2022.10.13(3일)

 

- 프론트엔드 3명

 

🛠 적용 기술

• JavaScript
• React.js
• react-router-dom
• styled-components
• react icons
• wavesurfer.js
• gh-pages

 

😀 내 역할

오디오 녹음 화면

음성 녹음 페이지 첫 화면

녹음 제한 시간 설정 가능

음성 녹음 중

음성 녹음 종료 후 페이지

들으러가기를 클릭하면 나오는 페이지

너비 414px 이하 화면에서는 margin-top이 0이 되고 상단바가 꽉 참

• 음성 녹음 페이지 UI
• 음성 녹음 기능
• 제한 시간이 지나면 음성 녹음 종료
• 녹음한 음성 재생

 

👍 소감

오디오를 녹음하는 건 처음 해봐서 생각하던 것 보다 시간이 오래걸렸다. 구글에 리액트 오디오 녹음을 검색했을 때 노출되는 국내 블로그가 있는데 그 블로그에서는 지금은 권장하지않는 메소드를 이용하고 있어서 그걸 사용하지 않으려고 하다보니 더 오래 걸린 것 같다. 영어로 된 글까지 참고하면서 열심히 검색했는데 결국 객체나 메소드들이 무슨 역할을 하는지 하나씩 확인해가면서 해결했다. 그리고 녹음된 파일 확인을 안하면서 해서 안되는 줄 알고 더 오래걸렸다... 역시 기본을 확실하게!!! 🔥 시간이 모자라서 firebase storage를 구현하지 못한게 아쉽다...🥲

 

배포하고 잘 작동하는지 테스트를 하다가 음악 재생 페이지에서 음악을 재생시키고 녹음 페이지로 이동하면 재생한 음악이 계속 재생되고 재생 페이지로 되돌아와도 통제할 수 없는 버그를 발견했다. 음악을 멈추는 로직이 있는 컴포넌트는 페이지 이동 로직이 있는 컴포넌트의 자식 컴포넌트였다. 음악을 멈추는 로직을 내가 작성하지도 않았고 ref.current를 이용하고 있어서 음악 정지 함수를 부모컴포넌트에서 선언해서 props로 내려주기가 어려웠다. 그래서 이전에 알게 된 imperativeHandle를 사용해서 금방 해결했다. imperativeHandle를 몰랐다면 해결하는데 한참 걸렸을 것 같다. 이번 일로 쓸모없는 배움은 없다는 것을 깨닫게 됐다.😀💡

 

🤔새롭게 배운 것

- 오디오 녹음을 유저에게 허락을 받는 것부터 시작했는데, 이전 프로젝트때 한 유저 위치 받아오기처럼 유저에게 뭔가를 요청할때는 navigator api를 사용하는 것 같다. 검색해보니 엄청 많은 메소드들이 있었다. 자주 쓰이는 메소드는 뭐가 있는지 찾아봐야겠다. 

 

- 깃허브 PR 양식은 상위폴더에 파일만 둬도 적용된다..!

 

- 프로젝트를 gh-pages로 배포하면 https가 된다. 그런데 내부 코드에서 http로 요청을 보내면 Mixed Content 관련 에러가 발생한다. 그래서 프로토콜을 동일하게 사용해야한다. heroku로 배포하면 해결할수있다고도 한다.🤔

 

- addEventListener를 화살표 함수 모양으로 표현하면 이렇게 된다.

// 기존 형태
addEventListener("dataavailable", (event) => {});

// 화살표 함수 형태
ondataavailable = (event) => {};