아티스트를 위한 올인원 웹 뮤직 솔루션
음악 스트리밍부터 라이브 방송, 콘텐츠 다운로드까지 — 아티스트 홈페이지의 모든 것을 하나로
🎵 onAIR+ Studio
아티스트를 위한 올인원 웹 뮤직 솔루션 🚀
📌 프로젝트 소개
onAIR+ Studio는 단순한 음악 재생을 넘어 라이브 라디오 스트리밍, 스마트TV 채널, 매장 BGM 서비스,
YouTube 라이트박스 뷰어, 음원 다운로드 시스템까지 갖춘 올인원 뮤직 전문 스트리밍 웹 플랫폼입니다.
그누보드5(Gnuboard5) 기반 PHP 백엔드 위에 순수 Vanilla JS로 구현된 프론트엔드가 결합된 풀스택 프로젝트입니다.
✨ 주요 기능
🎙️ 웨이크워드 음성명령 시스템
- 호출어로 시작하기 (PC) — "오케이뮤직", "헤이뮤직", "하이뮤직", "헬로뮤직" 등 호출어를 말하면 자동으로 마이크 활성화
- 🎤 마이크 버튼 — 상단 마이크 버튼 또는 화면 하단 FAB 버튼 탭으로 마이크 켜기
- 📱 흔들기 (모바일) — 폰을 흔들면 자동으로 마이크 활성화, 손이 바쁠 때 유용
- 🔄 연속 명령 모드 — 한 번 호출 후 계속 이어서 명령 가능, 매번 호출어 불필요
- 🔊 음성 피드백 — 명령 처리 결과를 음성으로 안내, 마이크 활성화 시 볼륨 자동 감소 후 복원
- 🎵 재생 제어 — 재생·정지·다음곡·이전곡·반복·셔플 등 플레이어 전체 제어
- 🔍 음악 검색 — 곡명·아티스트·장르는 물론 감정·상황으로도 검색 후 자동 재생
- 🔊 볼륨 제어 — 볼륨 크게·작게·퍼센트 직접 지정·음소거 및 해제
- 📺 동영상 제어 — 유튜브 검색·재생·연속재생·반복재생·이전·다음·닫기
- 📻 라디오 · 스마트TV — 방송국명·채널명을 말하면 즉시 해당 방송 실행
- ❤️ 즐겨찾기 — 현재 곡 저장·삭제·목록 보기·번호 또는 제목으로 재생·전체 재생
- 🗂️ 메뉴 이동 — 홈·플레이리스트·인기차트·라디오·스마트TV·신보·아티스트 등 모든 섹션 이동, 페이지 번호 지정 이동 지원
- ⏰ 타이머 · 알람 — 수면 타이머 설정·취소, 지정 시간 후 알람 설정·취소
- 💬 일상 대화 — 현재 시간·날짜·날씨 조회, 사칙연산 계산
- 🎨 테마 변경 — 다크·라이트 모드 및 세부 테마 음성으로 즉시 변경
🎧 오디오 플레이어
- 커스텀 Web Audio API 기반 플레이어 엔진 (AudioPlayer)
- 무한스크롤 플레이리스트 (IntersectionObserver, 30곡 배치 렌더링)
- Canvas 전축(턴테이블) 실시간 렌더링 애니메이션
- Web Audio EQ 시각화 (fftSize=2048, 30밴드 로그 스케일)
- Ping-Pong 타이틀 스크롤 애니메이션
- 반복재생 / 이전곡 / 다음곡 / 볼륨 컨트롤
- AJAX 플레이리스트 동적 로드 (페이지 새로고침 없이 검색·교체)
📻 라이브 라디오 스트리밍
- 다중 라디오 스트림 카드 (data-stream 속성 기반)
- 15초 폴링으로 실시간 청취자 수·현재 곡 정보 갱신
- 스트림 모드 ↔ 일반 재생 모드 자동 전환
- pause / resume 토글 지원
📺 스마트TV 채널
- 비동기 채널 카드 동적 로딩 (concurrency=2, batchSize=6)
- IframeLightbox 16:9 전체화면 재생
- 채널 카드 스크롤 등장 IntersectionObserver 애니메이션
🎬 YouTube 라이트박스
- 전체화면 iframe 임베드 플레이어
- 오디오/라디오 자동 정지 후 영상 재생
- ESC·배경클릭 닫기 지원
📥 음원 다운로드 시스템 (YouTube)
- MP3(256kbps) / MP4(1080p) 포맷 선택 다운로드
- AbortController 기반 즉시 취소 기능
- 실시간 스트리밍 진행바
- 비회원 일일 다운로드 횟수 제한 및 초과 시 모달 안내
🏪 매장 BGM 서비스
- 업종별 추천 (카페·의류·스파·호텔·레스토랑·피트니스)
- 분위기별 플레이리스트 (Morning Calm · Jazz Afternoon · Evening Lounge · Nature & Chill)
- BPM 표시 큐레이션
🔐 회원/비회원 분리 시스템
- 비회원: 곡당 1분 미리듣기 제한 (오디오)
- 재생 55초 시점 우측 하단 안내 토스트 (5초 자동 소멸, 카운트다운 바 포함)
- 회원: 전곡 무제한 스트리밍
🎨 10가지 테마 시스템
| 구분 | 테마 |
|---|---|
| 🌑 Dark | Midnight · Void · Amber · Forest · Crimson |
| ☀️ Light | Arctic · Mint · Golden · Lavender · Sakura |
📱 PWA (Progressive Web App)
- Service Worker 등록 (홈 화면 설치 버튼 지원)
beforeinstallprompt이벤트 기반 앱 설치 유도manifest.json홈 화면 추가 지원
🛠 기술적 특징
프론트엔드
- Vanilla JS (ES5/ES6 혼용) — 프레임워크 없이 순수 JS로 전체 구현
- Canvas 2D API — 전축 턴테이블, EQ 바, 아날로그 토암 실시간 렌더링
- Web Audio API — 실제 오디오 주파수 분석 및 EQ 시각화
- IntersectionObserver — 무한스크롤, 카드 등장 애니메이션
- MutationObserver — 제목/재생 상태 변화 감지 자동 동기화
- AbortController — 네트워크 요청 즉시 취소
- Fetch API — 모든 비동기 통신
- IIFE 패턴 — 전역 스코프 오염 방지 및 모듈화
- 이벤트 위임 — 단일 리스너로 동적 요소 일괄 처리
- requestAnimationFrame — 60fps 렌더 루프 최적화
보안
- PHP Referer 검증
- XSS 방어
- 검색어 위험 문자 패턴 필터링 (SQL Injection 방어)
- 민감 경로 접근 차단
- 도메인 검증
성능 최적화
- DOM 참조 캐싱 (
_allSections,_allNavItems) - Batch read → Batch write (레이아웃 스래싱 방지)
will-change: transform동적 활성화/해제touchstart+click이중 등록으로 300ms 딜레이 제거- rAF 디바운스 resize 핸들러
- 섹션 배경 파티클 더블 rAF 지연 초기화
- gzip 압축 (mod_deflate, level 6)
백엔드
- PHP 8 + Apache 2.4
- 그누보드5 회원 시스템 연동
- PHP 파일로 JS/CSS 동적 생성
- 라디오 스트림 상태 폴링 서버
- 음원 다운로드 프록시
- 스마트TV 채널 API
- 실시간 라이브 채널 API
📦 기술 스택
| 분류 | 기술 |
|---|---|
| Backend | PHP 7.4+ (권장), Apache 2.4, Gnuboard5 |
| Frontend | Vanilla JS (ES5/ES6), HTML5, CSS3 |
| Graphics | Canvas 2D API, Web Audio API |
| UI | Font Awesome 6.5, Google Fonts (Syne · Noto Sans KR) |
| PWA | Service Worker, Web App Manifest |
| Server | Windows Server, OpenSSL 3.1, mod_deflate, mod_evasive |
| Security | HTTPS (SSL/TLS), .htaccess, PHP Referer 검증 |
🚧 개발 현황
⚠️ 본 프로젝트는 현재도 지속적으로 기능 추가 및 개선이 진행 중입니다.
- 커스텀 오디오 플레이어 엔진 구현
- Canvas 전축 턴테이블 렌더러
- Web Audio EQ 시각화 (30밴드 로그 스케일)
- 무한스크롤 플레이리스트
- 라이브 라디오 스트리밍 & 실시간 폴링
- 10가지 테마 시스템 (Dark 5 / Light 5)
- 비회원 1분 제한 + 55초 안내 토스트
- YouTube 라이트박스 뷰어
- 음원 다운로드 시스템 (MP3/MP4)
- 스마트TV 채널 비동기 로더
- PWA 설치 지원
- 매장 BGM 서비스 섹션
- 섹션별 배경 파티클 애니메이션
- 웨이크워드 (마이크 자동 켜기)
- 회원 즐겨찾기 / 재생 히스토리
- 음질 선택 옵션
- 푸시 알림
- 흔들기로 마이크 켜기
- 수면 타이머
🌐 서비스 주소
https://xpx.kr/onair
© 2026 onAIR+ Studio · Electronic · Ambient · Experimental
Since 2026 — 지금도 진화하는 뮤직 플랫폼
이 개발자의 다른 프로젝트
수정 이력 (52)
AES-128 암호화 TS 파일 다운로드 다운로드, 파일병합, 인코딩 속도 개선
동영상, 오디오 PageJump 기능추가 HLS(m3u8) 동영상 다운로드(TS병합 + MP4) 기능추가 멤버십 기간제 적용 기능추가
기간별 권한추가로 유료영상 기능추가 사이트 운영 보조비용 획득 목적의 부대 서비스 추가 HLS, 유튜브 영상 전용 플레이어 통합 콘솔오류 제로화로 서버부담 최소화
오디오 리스트 초기화 오류 수정 음악방송 신청곡 URL동기화 실시간TV채널 업데이트 동기화
① 노이즈 단독 발화 차단 ② STT 조사 오인식 정규화 ③ CMD_SUFFIXES 접미사 확장 기타 개발자 콘솔 오류 제로화 추진
유튜브 영상 마우스오버시 미리보기 가로1열 일때 쇼츠처럼 자동 미리보기
오디오 리스트 스크롤 센터링 코드 추가 클래스 변화 감시(MutationObserver) 이벤트 바인딩 추가 이벤트에도 차트 클리어 바인딩 pause 직후 clear 를 막기 위해 타이밍 보강 팝업 외부의 즐겨찾기 리스트 표시 동기화
오디오 즐겨찾기 래핑 방식 대신, window.onFavSaved 훅 또는 DOMContentLoaded 이후 안전하게 래핑하도록 수정 각 섹션별 DOM 행을 실시간으로 제거하는 코드를 추가 HLS 스트림 과 일반 영상 볼륨 수신 코드 동기화.
APCu 페이지 캐시 키 누락 수정 파일캐시 병합 풀 정렬 컬럼 URL 방식 검색 SQL + PHP usort PHP usort (dbItems) 기타 자잘한 버그 수정
웨이크워드 ├─ 연속 모드 → retries 리셋 + "잠시 후 다시 듣습니다..." → 자동 재시도 └─ 일반 모드 → "🎤 탭하여 다시 시도" + 8초 후 자동 닫기 UPDATE(기존 곡) 시에만 정리 실행 INSERT(신규 곡) 시에는 정리 실행 안 함
동영상, 스마트TV , 오디오 각 섹션별로 볼륨 설정값 분리 저장 음성명령 각 섹션별로 대응
각 알림 토스트 반응구조 및 디자인 변경 음악 공유기능 다면화 각 섹션별 이동속도 개선 소스정리 및 콘솔오류 제로화
실시간TV 탭멈춤 현상 오디오 재생중 리스트 페이지 이동시 지연현상
iOS 13+ 감지 ↓ micBtn 탭 (사용자 제스처) ↓ DeviceMotionEvent.requestPermission() 호출 ↓ "허용" 선택 ↓ "흔들기 기능이 활성화됐어요!" 토스트 ↓ 이후부터 흔들기 → 음성 인식 활성화 Android / 구형 iOS ↓ 기존처럼 페이지 로드 시 바로 등록
오디오 페이지연속재생 페이지연속재생반복 음성 연동
구형 스마트폰에서 장시간 TV 시청 중 탭 멈춤현상 수정 페이지닫기, 탭닫기, 사이트종료, 탭종료 관련 단축키 및 음성기능 제거
찜영상 추가 삭제 음성명령 추가 오디오 즐겨찾기 UI변경 및 선택재생 기능추가 음악방송, 실시간TV 크롤링 속도 개선
찜목록 "찜재생" 음성발화 재생시 가로영상 세로영상 구분 오류 수정
오디오 100만곡 대비 검색속도 개선 모바일 최적화 완료 음성발화 단어 확대 동영상 플레이어 일부 기능 및 UI 변경
mp3 다운로드 사용 유, 무 다운로드권한 회원레벨 설정 관리 다중 DB출력 비율 분배 + shuffle() 병합 으로 변경 RAND() → 오프셋 방식으로 교체 COUNT 쿼리를 APCu로 캐싱
동영상 찜 섹션 선택재생, 반복재생 기능추가 음성명령 연동 음성명령 가이드 업데이트 음성명령 오탐 방지 개선
쇼츠 및 가로 세로 영상 구분 화면 비율 동적연동 비율적용
유튜브 영상 화질 개선 localStorage 화질 설정 사전 주입 sessionStorage 대역폭 위장 postMessage 타겟 정밀 지정 API 스크립트 로드 → youtube.com (콜백 안정성 보장) 플레이어 생성 host → youtube-nocookie.com (실제 스트림 도메인) 화질 정책 우회 목적
DB + 파일캐시 병합 출력(오디오 1,084,668곡) 출력 순서 (DB우선 / 캐시우선 / 섞기) APCu 메모리 캐시 (32MB 고정, 매 요청 1~5ms)
오디오 DB업로더, 여분필더URL, 폴더파일캐시추출 단일 또는 다중출력
오디오UI 개선및 변경
동영상 게시판 복수지정 반영 1 ~ 5개 → 속도 영향 거의 없음 (~10ms) → 적극 권장 6 ~ 10개 → 속도 영향 경미 (~30ms) → 사용 가능 11 ~ 20개 → 속도 영향 체감 가능 (~80ms) → 인덱스 최적화 필요 20개 이상 → 속도 영향 느려질 수 있음 → 구조 재검토 권장 관리자 페이지 재설계 반영
화질개선: getAvailableQualityLevels() Deprecated 대응 정적 목록(STATIC_QUALITY_RATES)으로 폴백 동적 목록 조회가 실패할 경우 정적 목록을 사용합니다.
오디오 추출형태 다변화 그누보드 게시판 "여분필더" 또는 "첨부(업로더)파일" 외 특정 드라이버 및 폴더 내 음원 자동추출
동영상 플레이어 UI개선 및 재생중 찜 기능 추가 음성명령 범위 확장 및 근접 정확도 개선 섹션별 검색 분기 우선순위 지정으로 사용자 편의성 확대
영상 풀스크린 상태에서 웨이크워드 IIFE내에 voiceOverlay 추가 웨이크워드 호출시 불필요한 토스트 알림 제거 웨이크워드 덕킹 볼륨 10%로 축소
풀스크린 상태에서 영상 연속 재생시 풀스크린 풀림문제 수정 단일, 선택, 페이지 별 연속, 반복 기능 분기 doEnd()에 단일 곡 반복 모드 추가 AP 반환 객체에 setSingleRepeat 메서드 추가
라디오 음악방송 섹션 voice commands 연동 일부 레이아웃 배경 수정 voice commands 정확도 개선
TV섹션 음성 명령 시스템 interim STT 캡처로 오탐 방지 PHP 4중 폴백 캐시 시스템
그누보드 회원만 이용 가능한 외부 실시간 채팅창 과 테마10가지 컬러셋 연동 각 버턴 및 동영상, 오디오 섹션별 음성 명령어 분리 각종 설정 항목을 쉽게 관리할수 있도록 관리자 페이지 추가
동영상, 오디오 볼륨제어 웨이크워드 IIFE에서도 가능하게.. 모바일 환경에서 동영상 끊김방지 렌더링 격리 강화
스크롤마다 전체화면 GPU 재합성 중단 모달·드로어 열릴 때 GPU 비용 제거 11개 섹션 파티클, GPU 레이어, 백그라운드에서 CPU 완전 해방 불필요한 네트워크 요청 차단
민자, 춘자, 영자, 순자 어렵게 스카웃 했습니다..^^ 춘자야~~
유튜브 플레이어 변경 → YouTube iframe 방식을 전용플레이어로 교체
음성명령가이드 업데이트 음성명령 일상항목(날짜,시간,날씨,계산기) 추가 명령어 추가
사이드바 토글 UI 추가 음성 명령어 정확도 개선 라디오 카드 출력 XSS 패치
모바일에서 웨이크워드 (마이크 자동 켜기) 흔들어 주세용^^
웨이크워드 (마이크 자동 켜기) "오케이 뮤직" "헤이 뮤직" "OK Music" "Hey Music" ↓ 또는 1 상단 검색바의 🎤 마이크 클릭 2 오버레이가 열리면 명령어를 말하기 3 인식된 명령이 자동 실행됨 ↓ 홈 - 소개 섹션 참고
🎤 음성으로 곡 검색 크롬/사파리/엣지 모두 지원
EQ 프리셋 기본 / 팝 / 록 / 재즈 / 클래식 / 베이스 6종 프리셋 5밴드 BiquadFilter (80Hz·320Hz·1kHz·3.2kHz·8kHz) 실시간 적용
재생속도 플레이어 1× 버튼 클릭할 때마다 1× → 1.25× → 1.5× → 0.75× → 1× 순환
TV섹션 즐겨찾기 기능추가 유튜브 선택재생 반복재생 기능추가
수면 타이머 추가, 인기차트 재생 옵션 추가
플레이리스트 무한 스크롤 에서 페이지션 으로 변경
카카오톡 밴드 페이스북 라인 텔레그램 왓츠앱 링크 복사 X (트위터) 이메일 공유기능 추가
인기차트 최근재생 기능 추가
유튜브 동영상에 찜 기능을 추가 하였습니다.
와우... 정말 대단하십니다..
좋은 평가 감사합니다^^
좋은 평가 감사합니다^^