바이브 코딩으로 무료 음악 공유 사이트 만들기 - 오디오 웨이브폼 구현

바이브 코딩으로 저작권 없는 AI 무료 음악 공유 사이트 만들기 2번째입니다. 바이브 코딩은 Codex, 프론트엔드는 NextJS, SCSS 백엔드는 Express와 몽고DB를 사용했습니다. 이번 작업은 오디오 태그 대신 커스텀 오디오 태그를 만들고 웨이브폼을 구현했습니다.

 

오디오 태그를 사용했을 때의 UI입니다.

 

바이브코딩으로 웨이브폼을 구현할 때 문제가 있는데 웨이브폼을 캔버스에 그릴 때와 음악을 재생할 때 각각 S3 Url을 불러오기 때문에 곡이 적게 등록되어 있어도 사이트가 상당히 무거워집니다(이미지에서는 총 3번 같은 곡을 불러오는데 1번은 개발 환경에서만 발생). 또한, 오디오를 이용해 웨이브폼을 그리면 렌더링 속도도 매우 느립니다. 이를 해결하기 위해서 웨이브폼은 음악을 업로드할 때 json 파일을 추가로 만들어 s3로 업로드하도록 코드를 수정할 예정입니다.

 

https://lyrlog.com/

릴로그

 

구현 예정

웨이브폼에 스켈레톤ui 추가
웨이브폼 캔버스 그릴 때 오디오 대신 json 사용
재생 중인 음악 시간, 음악 길이 표시
메인 페이지 및 트랙 페이지 UI 수정
커스텀 오디오 태그 개선(음소거 및 볼륨 조절)
오디오 재생속도 조절
이미지 업로드시 앨범 커버 변경(이미지 업로드가 없다면 기존 앨범 커버 사용)
메인 페이지 한 곡 재생
메인 페이지에서 곡 재생시 다음 곡으로
다크모드
검색 기능(동적 사이트 배포시)

 

구현된 기능

회원 가입
로그인
음악 등록
음악 삭제
음악 및 이미지 S3에 업로드
S3 presign
커스텀 오디오 태그(웨이브폼, 웨이브폼 클릭시 해당 구간으로 이동)