해당 프로젝트의 웹은 프론트의 React와 백엔드의 Django로 개발되었으며 각각의 git repository가 있습니다. 프론트와 백엔드는 websocket을 이용해 서로 통신하여 정보를 주고 받습니다. git repository 주소:
- 프론트(원본): leh60245/recognize-piano-pitch-sound
- 백: JerryJang/pytest
프론트 프로그램을 사용하려면 우선 의존성 모듈을 설치해야 합니다. cd 명령어로 현재 디렉토리를 프로젝트 내 최상위 폴더(다운받은 프로젝트 폴더 이름)로 지정하세요. npm이 설치되지 않아 에러가 발생하는 경우 먼저 npm을 설치한 다음, 아래 명령어를 실행하여 의존성 모듈을 설치하십시오.
yarn
or
yarn install프론트 프로그램을 실행하는 방법입니다.
npm start백엔드 프로그램의 경우, 의존성 패키지로 오디오 처리 및 인식을 담당하는 aubio를 설치해야 합니다.
pip install aubio만약 Windows 환경에서 설치 언어가 한국어인 경우, UTF-8 관련 오류가 발생하여 설치가 불가능할 수 있습니다. 해당 문제가 발생한 경우, 가상 환경을 사용하여 설치를 진행해야 합니다. 아래 예시는 anaconda의 가상 환경을 이용하여 설치와 실행을 하는 방법을 안내한 것입니다. 먼저 임의의 가상환경 suisou를 가정하겠습니다.
conda create -n suisou python=3.7
conda activate suisou
conda config --add channels conda-forge
conda install -c conda-forge aubio해당 방법을 사용하면 오류가 해결됩니다.
필요한 라이브러리가 설치되었다면 websocket_server.py 파일을 실행시켜 프론트엔드에 음 인식 내용을 백엔드에서 websocket을 통해 전달해줘야 합니다. 백엔드 서버의 실행 방법은 다음 코드를 참고하십시오.
conda activate suisou
cd pytestproject/blog
python websocket_server.py이외의 문제가 발생한 경우, 해당 매뉴얼을 참고하여 해결하세요.(https://aubio.org/manual/latest/python_module.html)
초기 화면은 메인 메뉴로 저희 프로젝트의 로고와 다크모드 설정 버튼, 그리고 페이지 이동 메뉴로 구성되어 있습니다. 다른 페이지 화면은 크게 4가지로 “악보 연습”, “오늘의 추천 악보”, “개인 설정”, “설정” 입니다.
- 악보 연습: 악보를 선택,검색할 수 있는 메뉴가 나오고,악보를 고르면 선택한 악보를 연습할 수 있도록 창이 나옵니다. 화면의 구성은 맨 위부터 시작버튼, 오디오 시각화, 악보 이미지, 현재 인식하는 음 순으로 구성되어 있습니다. 시작 버튼을 누르면 4번 카운트다운과 함께 음악이 시작되며, 현재 연주 위치를 악보 위에 파랑색 음표 형태로 알려줍니다.연주를 잘못하여 다른 음정이 인식되면 제대로 연주할때까지 다음 음정으로 넘어가지 않습니다. 연주가 끝난 후 틀린 음정과 틀린 횟수를 피드백해주고, 다시 할 것인지 고르는 메뉴가 나옵니다.
- 오늘의 추천 악보: 메인 메뉴 화면에서 바로 특정 악보 (현재 구현된 악보는 Frere Jaques)로 이동하며 화면의 구성은 악보명,재생메뉴,메트로놈 다이얼, 악보 이미지와 악보 이미지 위 재생 바로 이루어져 있습니다. 악보 재생 시간에 알맞게 메트로놈 다이얼이 회전하며 재생 바가 현재 악보 연주 위치로 이동합니다.
- 개인 설정: 메인 메뉴 화면에서 보이는 “개인 설정” 버튼을 누르면 나오는 화면으로 프로그램의 배경색을 변경할 수 있습니다. 다크모드 설정 버튼은 버튼 UI 색상을 변경합니다.
- 설정: 악보 연습 메뉴에서 사용하는 녹음 기능이 정상적으로 동작하는지, 마이크 상태를 확인하기 위해 존재하는 페이지입니다.
웹 화면을 구성하는 파일과 데이터는 모두 src 폴더 내부에 있습니다. 예외적으로, 매트로놈 다이얼을 구성하는 이미지만 public 폴더 내부에 있습니다.
App.js: “메인 메뉴”, 즉 웹 앱의 첫 화면인 메인 메뉴를 구성하는 js 파일입니다. 메뉴의 아이콘,종류,구성 요소를 변경,추가,삭제하고자 하는 것이 있다면 해당 파일을 수정하면 됩니다.
routes 폴더: 버튼을 눌렀을 때 나오는 화면과 json 형식의 데이터가 있습니다.
- SheetMusicSelectorPage.jsx: "악보 연습"을 선택했을 때 악보를 검색, 선택하는 메뉴를 구성합니다.
- AudioStreamer.jsx: “악보 연습”을 선택한 후 악보를 선택했을때 악보 연습 화면을 구성합니다.
- SuiSou.jsx: “오늘의 추천 악보”의 화면을 구성합니다.
- instruction.js: “설정 화면”을 구성합니다.
- setting.jsx: "개인 설정 화면"을 구성합니다.
- farmer-motion.d.ts: 애니메이션을 구현하게 해주는 리액트 라이브러리의 일종으로, 디자인 구현 과정에서 생기는 오류를 해결하기 위해 추가된 파일입니다. utils 폴더: 화면을 구성하는데 필요한 여러 함수들을 모아둡니다.
'기술문서.pdf'를 보시면 됩니다.