Skip to content

wookoo/BeatHerb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

497 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BeatHerb

SSAFY 10기 공통 프로젝트 서울 5반 🎼 'Bit는 알아도 Beat는 모른다' 🎼
(2024.01.08 ~ 2024.02.16)

beatherb

📗 목차 📗

1️⃣ 프로젝트 소개
2️⃣ 개발 환경
3️⃣ 서비스 화면
4️⃣ 주요 기능
5️⃣ 프로젝트 특징 기술 소개
6️⃣ 설계 문서
7️⃣ 팀원 소개

1. 프로젝트 소개

📜 Overview 📜

"음악 제작? 어렵게 생각하지 마세요! BeatHerb가 도와드립니다."

피아노 반주에 키보드 소리를 입혀보거나 잔잔한 멜로디에 고양이 울음 소리를 입혀보거나 마음껏 소리를 만들어보세요.
내가 만든 소리는 업로드와 라이브를 통해 BeatHerb 사용자들과 공유할 수 있습니다.

2. 개발 환경

📚 Tech Stack 📚

Backend Framework

JWT SpringBoot OpenVidu Socket.io Apache Kafka Docker Jenkins SpringDataJpa

Frontend Framework

React TailwindCSS ffmpeg Tone.js Wavesurfer.js ffmpeg.wasm waveform_playlist

DB

MySQL Redis

Management Tool

Notion Jira GitLab Figma Mattermost

3. 서비스 화면

홈 화면 & 로그인 화면

home{width=500px height=250px} login{width=500px height=250px}
홈 화면 로그인 화면

작업실 화면 (소리 쌓기 화면)

work1{width=500px height=250px} work2{width=500px height=250px}
내 컴퓨터에서 음원 파일 가져오고 BeatHerb에서
마음에 드는 소리를 쌓은 후 업로드하는 화면
BeatHerb에서 마음에 드는 소리를 가져오고
가상 악기로 만든 소리를 쌓은 후 업로드하는 화면

컨텐트 상세 검색 화면

detail_search{width=500px height=250px}
컨텐트 상세 검색 화면

게시판 화면

content{width=500px height=250px} live{width=500px height=250px}
전체 컨텐트 게시판 화면 라이브 게시판 화면

라이브 화면

livecat{width=500px height=250px}
라이브 화면

4. 주요 기능

1. 소리 쌓기 서비스 🔉

기존에 등록되어 있는 음반 정보를 가져와서 그 음반 위에 소리를 쌓을 수 있습니다.

ex)
1-1). 피아노 연주가 나오는 멜로디 정보를 가져와서 보컬 소리를 쌓을 수 있음.
1-2). 원하는 보컬 정보를 가져온 후 piano, synth, drum과 같은 가상악기를 통해 소리를 녹음하여 쌓을 수 있음.

소리쌓기서비스

2. 라이브를 활용해 커뮤니티로 확장 📺

라이브에서 공유하는 컨텐츠에 관심 있는 사람은 누구나 들어와서 라이브 방송에 참여 할 수 있습니다.

라이브

3. 해시태그를 이용한 상세 검색 💻

피아노, 드럼, MR 등과 같은 해시태그를 기반으로 정확한 검색 결과를 얻을 수 있습니다.

해시태그를 이용한 상세검색

5. 프로젝트 특징 기술 소개

1. kafka 도입을 활용한 멀티 프로세싱 음악 처리 후 사용자는 업로드가 되었다는 신호를 보다 빠르게 제공 받을 수 있습니다.
▶️ (약 10초 이상 -> 약 3초)

2. hls 기술을 이용한 실시간 음악 스트리밍

3. Openvidu 를 활용한 라이브

4. 가상 악기를 이용하여 음악 생성 후 업로드 가능

6. 설계 문서

API

Member ![member-controller](/uploads/86e6f8888f3eac80ad12acf659a6f1da/member-controller.PNG) ![member-info-controller](/uploads/026d9e72b03460ba22c0b2fc06469c69/member-info-controller.PNG)
Auth ![auth-controller](/uploads/42268e797cbc6c283b823d3d603cbae0/auth-controller.PNG)
HashTag ![hash-tag-controller](/uploads/e0240fb282ab5d936eff92c94743766f/hash-tag-controller.PNG)
Live ![live-controller](/uploads/ff3abc8893837f545349fa3cfdb2bc8b/live-controller.PNG)
Content ![content-controller](/uploads/6d540e30751dde097ae2cc04b85d994a/content-controller.PNG) ![content-load-controller](/uploads/8c5c7836b0c711ece760ab49374d3555/content-load-controller.PNG) ![content-detail-controller](/uploads/f468c84a4fb8da9c07cb2f666066113f/content-detail-controller.PNG) ![content-search-controller](/uploads/808b950a4edca9ea9f56f31d164d669d/content-search-controller.PNG)
Follow ![follwer-controller](/uploads/5ce9a9ec610a347d1176252644928545/follwer-controller.PNG) ![following-controller](/uploads/7fb20754acfb80ac812a9f9bf6368502/following-controller.PNG)
DirectMessage ![direct-message-controller](/uploads/2730867f590f29ceb3f3c7ddbbab970e/direct-message-controller.PNG)
Interest ![interest-controller](/uploads/a84fb3ecd8aae38831f0b7df35792f41/interest-controller.PNG)
Star ![star-controller](/uploads/1adc9a1ec22d8c2692cabedbd4d110a1/star-controller.PNG)
Comment ![comment-controller](/uploads/302ac002cb85debddd38b7072f5221f5/comment-controller.PNG)

ERD

BeatHerb_erd

Architecture Structure

architecture

7. 팀원 소개

팀장(김도현) 팀원(김범수) 팀원(최지희) 팀원(박도연) 팀원(박세웅) 팀원(유시연)
dohyun{width=500px height=200px} bumsoo{width=500px height=200px} sihee{width=500px height=200px} doyeon{width=500px height=200px} seyoog{width=500px height=200px} siyeon{width=500px height=200px}
Backend Lead/Infra Frontend Lead Full Stack Full Stack Full Stack Full Stack

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors