CLJS-KARAOKE-CLIENT
Clojurescript로 구현 된 웹 가라오케 플레이어
데모
롤링 스톤즈 - 이제 온통
설명
괜찮은 노래방 선수를 만들려고 노력합니다. 몇 년 동안 나는 성공하지 못한 좋은 소프트웨어 가라오케 솔루션에 손을 대려고 노력했지만, 주요 대안은 Ultrastar와 같은 게임, Fret on Fire 등과 같은 게임 또는 YouTube 노래방 비디오의 재생 목록을 구성합니다.
두 대안 모두 인터넷을 통해 자유롭게 액세스 할 수 있지만 몇 가지 단점이있는 광범위한 노래 카탈로그를 제공합니다.
- Ultrastar와 같은 게임에서 온라인으로 제공되는 노래는 보컬과 함께 오리지널 노래 트랙을 사용하지 않는 것보다 더 자주 "가라오케 경험"을 죽입니다.
- 가사 동기화는 YouTube 노래방 비디오를 사용할 때 크게 다릅니다 (일부는 한 번에 전체 구절을 한 번에 렌더링하고 다른 일부는 음절 수준에서 가사를 동기화합니다).
주요한 어려움은 동기화 정보가있는 가사를 얻는 것이 었습니다. 웹에서 많은 MIDI 파일을 찾았으며 가라오케 머신에 사용되었습니다. 이 파일에는 가사가 포함되어 있습니다. 가라오케 머신의 MIDI 파일에 가사를 저장하는 방법에는 실제로 표준이 없기 때문에 많은 사람들이 저장되는 방식에 미묘한 차이가 있어서이 파일을 구문 분석 할 때 많은 가정을 만들었고 타이밍 데이터와 함께 별도의 파일에 가사를 추출했습니다. 대부분은 괜찮지 만 많은 사람들이 가변 오프셋으로 약간 떨어져 있습니다.
Midi Parser는 별도의 프로젝트 인 CLJ-Karaoke입니다.
또 다른 어려움은 가사가 MIDI 오디오 트랙과 동기화 되었기 때문에 노래 오디오 트랙을 얻는 것이 었습니다. 처음에는 오디오 트랙에 MIDI 파일을 직접 사용하려고했지만 오디오를 재생할 때 품질은 설치 한 사운드 글꼴에 크게 의존하고 괜찮은 결과를위한 좋은 환경을 설정하는 것은 사소한 작업이 아닙니다. 또한 웹 클라이언트 에서이 파일을 재생하고 싶다면이 모든 것을 고려하면 더 복잡해졌습니다. 그래서 나는 파일을 별도로 분리하기 위해 가사를 추출하고 Midis를 MIDIS를 MP3 파일로 렌더링하여 매우 굉장하고 다른 사운드 글꼴 컬렉션을 실험 할 수있었습니다.
특징
- 많은 노래
- 노래에 대한 배경 이미지는 노래로드 중에 Google 검색 후 웹에서 동적으로 가져옵니다 (캐시 된 경우 없음)
- 각 사용자는 로컬 배경을 캐시하고 정기적으로 URL을 몽고 DB로 푸시합니다. Google 사용자 정의 검색에는 일일 한도가있어 사용을 최소화하려고합니다.
- 초기화 데이터 (가사 오프셋, BG 이미지)는 사용자의 데이터를 통합하여 빌드 중에 향상됩니다.
- 밀리 초의 오프셋으로 가사를 동기화하는 능력 (제어판에서 또는 쿼리 문자열을 URL에 추가하여)
- 이전에 동기화 된 노래로 구축 된 자동 재생 목록
- 로컬 송 동기 정보 내보내기 서버 측 동기화 데이터에 병합 될 수 있습니다.
- 라이브 에코/리버브 사운드 FX가있는 데스크탑 Firefox 및 Chrome의 실험 오디오 입력 (최상의 결과를 위해 외부 마이크 사용)
- 실험 웹캠 녹화 및 비디오 내보내기 웹 파일. 내보낸 비디오의 오디오 채널은 마이크 입력을 효과 및 노래 트랙과 혼합 한 결과입니다.
- 원격 제어. 큰 화면에서 응용 프로그램을 실행하고 다른 응용 프로그램 인스턴스 (예 : 모바일 장치에서!)에서 재생을 제어하십시오.
- SEO 태그가있는 사전 렌즈 송 페이지를 구축하여 소셜 네트워크의 링크를 노래 이름과 이미지가있는 예쁜 카드로 공유 할 수 있습니다.
- 새로운 트랙을 가사와 동기화하기위한 가사 편집자.
- 오디오 파일을 선택하십시오
- 텍스트를 추가하고 음절로 나누십시오 (또는 임의의 청크 만)
- 트랙을 재생하고 각 조각의 "동기화"버튼을 누릅니다.
- 더 정확도를 원한다면 트랙이 속도를 늦출 수 있습니다.
작업
- 곡 제목을 위해 이미 최적화 된 글꼴 크기 인 다이나믹 글꼴 크기이지만 가사 디스플레이를 개선하는 방법을 찾고 있습니다.
- 모든 사용자의 사용자 정의 가사 오프셋을 캡처하는 방법으로, 이들을 후속 릴리스에서 기본값으로 통합
- 노래 배경과 동일합니다. 현재 Google 사용자 정의 검색은 노래 제목과 관련된 이미지를 찾는 데 사용되며,이 서비스에 대한 할당량이 있으며 매우 낮으며 검색이 더 적을수록 더 적습니다.
현지에서 실행
전제 조건 :
$ npm i -g shadow-cljs
$ npm install
$ shadow-cljs watch app
릴리스 빌드를 컴파일하려면 다음을 실행할 수 있습니다.
$ shadow-cljs release app
빌드는 /public 디렉토리에 있습니다.
주요 바인딩
- "ESC": 재생 중지
- "LR":로드 송
- "Alt-O": 재생 모드에서 Optons를 활성화합니다
- "Alt-H": 제어판 모드를 활성화합니다
- "왼쪽": 오디오는 거꾸로 찾습니다
- "오른쪽"오디오는 앞으로 추구합니다
- "Meta-Shift-L": 루프 모드 (현재 현재 작동)
- "Alt-Shift-P": 재생
- "Shift-Right": 재생 목록의 다음 곡
- "TT": 토스트!
- "H": 치트 시트를 보여주십시오
미래의 일
