아티스트를 위한 올인원 웹 뮤직 솔루션

음악 스트리밍부터 라이브 방송, 콘텐츠 다운로드까지 — 아티스트 홈페이지의 모든 것을 하나로

2026-03-08 (일) 05:22:43 조회 863
문의하기 1
아티스트를 위한 올인원 웹 뮤직 솔루션
PHP MySQL JavaScript HTML5 CSS3 Gnuboard5

🎵 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)

기능추가 및 개선 2026-05-17 (일) 06:49:38

AES-128 암호화 TS 파일 다운로드 다운로드, 파일병합, 인코딩 속도 개선

기능추가 2026-05-16 (토) 03:21:03

동영상, 오디오 PageJump 기능추가 HLS(m3u8) 동영상 다운로드(TS병합 + MP4) 기능추가 멤버십 기간제 적용 기능추가

기능추가 2026-05-07 (목) 21:58:50

기간별 권한추가로 유료영상 기능추가 사이트 운영 보조비용 획득 목적의 부대 서비스 추가 HLS, 유튜브 영상 전용 플레이어 통합 콘솔오류 제로화로 서버부담 최소화

버그수정 및 기능추가 2026-05-04 (월) 20:38:25

오디오 리스트 초기화 오류 수정 음악방송 신청곡 URL동기화 실시간TV채널 업데이트 동기화

웨이크워드 오탐 개선 3가지 2026-04-28 (화) 08:47:00

① 노이즈 단독 발화 차단 ② STT 조사 오인식 정규화 ③ CMD_SUFFIXES 접미사 확장 기타 개발자 콘솔 오류 제로화 추진

기능추가 2026-04-25 (토) 16:20:23

유튜브 영상 마우스오버시 미리보기 가로1열 일때 쇼츠처럼 자동 미리보기

기능추가 및 수정 2026-04-24 (금) 10:44:50

오디오 리스트 스크롤 센터링 코드 추가 클래스 변화 감시(MutationObserver) 이벤트 바인딩 추가 이벤트에도 차트 클리어 바인딩 pause 직후 clear 를 막기 위해 타이밍 보강 팝업 외부의 즐겨찾기 리스트 표시 동기화

기능 수정 추가 2026-04-22 (수) 09:42:55

오디오 즐겨찾기 래핑 방식 대신, window.onFavSaved 훅 또는 DOMContentLoaded 이후 안전하게 래핑하도록 수정 각 섹션별 DOM 행을 실시간으로 제거하는 코드를 추가 HLS 스트림 과 일반 영상 볼륨 수신 코드 동기화.

기능 추가 수정 및 버그수정 2026-04-18 (토) 18:49:14

APCu 페이지 캐시 키 누락 수정 파일캐시 병합 풀 정렬 컬럼 URL 방식 검색 SQL + PHP usort PHP usort (dbItems) 기타 자잘한 버그 수정

기능 수정 2026-04-14 (화) 05:01:09

웨이크워드 ├─ 연속 모드 → retries 리셋 + "잠시 후 다시 듣습니다..." → 자동 재시도 └─ 일반 모드 → "🎤 탭하여 다시 시도" + 8초 후 자동 닫기 UPDATE(기존 곡) 시에만 정리 실행 INSERT(신규 곡) 시에는 정리 실행 안 함

기능 수정 2026-04-11 (토) 09:06:36

동영상, 스마트TV , 오디오 각 섹션별로 볼륨 설정값 분리 저장 음성명령 각 섹션별로 대응

기능 수정 및 추가 2026-04-09 (목) 15:58:16

각 알림 토스트 반응구조 및 디자인 변경 음악 공유기능 다면화 각 섹션별 이동속도 개선 소스정리 및 콘솔오류 제로화

버그수정 2026-04-07 (화) 16:55:26

실시간TV 탭멈춤 현상 오디오 재생중 리스트 페이지 이동시 지연현상

모바일 웨이크워드 핵심 변경 로직 2026-04-06 (월) 19:52:27

iOS 13+ 감지 ↓ micBtn 탭 (사용자 제스처) ↓ DeviceMotionEvent.requestPermission() 호출 ↓ "허용" 선택 ↓ "흔들기 기능이 활성화됐어요!" 토스트 ↓ 이후부터 흔들기 → 음성 인식 활성화 Android / 구형 iOS ↓ 기존처럼 페이지 로드 시 바로 등록

기능추가 2026-04-05 (일) 15:59:00

오디오 페이지연속재생 페이지연속재생반복 음성 연동

버그 수정 및 기능 조정 2026-04-05 (일) 04:26:29

구형 스마트폰에서 장시간 TV 시청 중 탭 멈춤현상 수정 페이지닫기, 탭닫기, 사이트종료, 탭종료 관련 단축키 및 음성기능 제거

기능 추가 수정 2026-04-02 (목) 22:03:54

찜영상 추가 삭제 음성명령 추가 오디오 즐겨찾기 UI변경 및 선택재생 기능추가 음악방송, 실시간TV 크롤링 속도 개선

버그수정 2026-04-02 (목) 14:59:17

찜목록 "찜재생" 음성발화 재생시 가로영상 세로영상 구분 오류 수정

기능 추가 수정 2026-04-02 (목) 07:48:25

오디오 100만곡 대비 검색속도 개선 모바일 최적화 완료 음성발화 단어 확대 동영상 플레이어 일부 기능 및 UI 변경

기능추가 2026-04-01 (수) 15:02:03

mp3 다운로드 사용 유, 무 다운로드권한 회원레벨 설정 관리 다중 DB출력 비율 분배 + shuffle() 병합 으로 변경 RAND() → 오프셋 방식으로 교체 COUNT 쿼리를 APCu로 캐싱

기능추가 2026-03-31 (화) 13:15:58

동영상 찜 섹션 선택재생, 반복재생 기능추가 음성명령 연동 음성명령 가이드 업데이트 음성명령 오탐 방지 개선

기능추가 2026-03-30 (월) 19:21:01

쇼츠 및 가로 세로 영상 구분 화면 비율 동적연동 비율적용

기능 개선 2026-03-29 (일) 15:03:58

유튜브 영상 화질 개선 localStorage 화질 설정 사전 주입 sessionStorage 대역폭 위장 postMessage 타겟 정밀 지정 API 스크립트 로드 → youtube.com (콜백 안정성 보장) 플레이어 생성 host → youtube-nocookie.com (실제 스트림 도메인) 화질 정책 우회 목적

기능 추가 변경 2026-03-28 (토) 12:25:55

DB + 파일캐시 병합 출력(오디오 1,084,668곡) 출력 순서 (DB우선 / 캐시우선 / 섞기) APCu 메모리 캐시 (32MB 고정, 매 요청 1~5ms)

기능추가 2026-03-28 (토) 00:17:58

오디오 DB업로더, 여분필더URL, 폴더파일캐시추출 단일 또는 다중출력

개선및 변경 2026-03-27 (금) 11:47:54

오디오UI 개선및 변경

기능추가 2026-03-26 (목) 10:14:01

동영상 게시판 복수지정 반영 1 ~ 5개 → 속도 영향 거의 없음 (~10ms) → 적극 권장 6 ~ 10개 → 속도 영향 경미 (~30ms) → 사용 가능 11 ~ 20개 → 속도 영향 체감 가능 (~80ms) → 인덱스 최적화 필요 20개 이상 → 속도 영향 느려질 수 있음 → 구조 재검토 권장 관리자 페이지 재설계 반영

기능개선 2026-03-26 (목) 03:27:52

화질개선: getAvailableQualityLevels() Deprecated 대응 정적 목록(STATIC_QUALITY_RATES)으로 폴백 동적 목록 조회가 실패할 경우 정적 목록을 사용합니다.

기능추가 2026-03-25 (수) 23:41:41

오디오 추출형태 다변화 그누보드 게시판 "여분필더" 또는 "첨부(업로더)파일" 외 특정 드라이버 및 폴더 내 음원 자동추출

기능추가 및 개선 2026-03-25 (수) 16:46:52

동영상 플레이어 UI개선 및 재생중 찜 기능 추가 음성명령 범위 확장 및 근접 정확도 개선 섹션별 검색 분기 우선순위 지정으로 사용자 편의성 확대

기능추가 및 수정 2026-03-25 (수) 10:56:57

영상 풀스크린 상태에서 웨이크워드 IIFE내에 voiceOverlay 추가 웨이크워드 호출시 불필요한 토스트 알림 제거 웨이크워드 덕킹 볼륨 10%로 축소

기능수정 2026-03-23 (월) 17:51:31

풀스크린 상태에서 영상 연속 재생시 풀스크린 풀림문제 수정 단일, 선택, 페이지 별 연속, 반복 기능 분기 doEnd()에 단일 곡 반복 모드 추가 AP 반환 객체에 setSingleRepeat 메서드 추가

기능추가 2026-03-20 (금) 12:52:02

라디오 음악방송 섹션 voice commands 연동 일부 레이아웃 배경 수정 voice commands 정확도 개선

기능추가 2026-03-19 (목) 19:43:38

TV섹션 음성 명령 시스템 interim STT 캡처로 오탐 방지 PHP 4중 폴백 캐시 시스템

기능추가 2026-03-19 (목) 14:49:48

그누보드 회원만 이용 가능한 외부 실시간 채팅창 과 테마10가지 컬러셋 연동 각 버턴 및 동영상, 오디오 섹션별 음성 명령어 분리 각종 설정 항목을 쉽게 관리할수 있도록 관리자 페이지 추가

기능추가 2026-03-18 (수) 16:25:03

동영상, 오디오 볼륨제어 웨이크워드 IIFE에서도 가능하게.. 모바일 환경에서 동영상 끊김방지 렌더링 격리 강화

배터리 절약 효과 기능개선 2026-03-18 (수) 12:02:33

스크롤마다 전체화면 GPU 재합성 중단 모달·드로어 열릴 때 GPU 비용 제거 11개 섹션 파티클, GPU 레이어, 백그라운드에서 CPU 완전 해방 불필요한 네트워크 요청 차단

스토브리그 2026-03-17 (화) 09:59:27

민자, 춘자, 영자, 순자 어렵게 스카웃 했습니다..^^ 춘자야~~

기능변경 2026-03-16 (월) 16:52:41

유튜브 플레이어 변경 → YouTube iframe 방식을 전용플레이어로 교체

기능추가 2026-03-15 (일) 22:13:06

음성명령가이드 업데이트 음성명령 일상항목(날짜,시간,날씨,계산기) 추가 명령어 추가

기능추가 2026-03-14 (토) 01:21:49

사이드바 토글 UI 추가 음성 명령어 정확도 개선 라디오 카드 출력 XSS 패치

기능추가 2026-03-12 (목) 12:03:30

모바일에서 웨이크워드 (마이크 자동 켜기) 흔들어 주세용^^

기능추가 2026-03-12 (목) 08:11:13

웨이크워드 (마이크 자동 켜기) "오케이 뮤직" "헤이 뮤직" "OK Music" "Hey Music" ↓ 또는 1 상단 검색바의 🎤 마이크 클릭 2 오버레이가 열리면 명령어를 말하기 3 인식된 명령이 자동 실행됨 ↓ 홈 - 소개 섹션 참고

기능추가 2026-03-11 (수) 20:01:37

🎤 음성으로 곡 검색 크롬/사파리/엣지 모두 지원

기능 추가 2026-03-11 (수) 17:07:20

EQ 프리셋 기본 / 팝 / 록 / 재즈 / 클래식 / 베이스 6종 프리셋 5밴드 BiquadFilter (80Hz·320Hz·1kHz·3.2kHz·8kHz) 실시간 적용

기능 추가 2026-03-11 (수) 15:07:58

재생속도 플레이어 1× 버튼 클릭할 때마다 1× → 1.25× → 1.5× → 0.75× → 1× 순환

기능 추가 2026-03-11 (수) 07:59:28

TV섹션 즐겨찾기 기능추가 유튜브 선택재생 반복재생 기능추가

기능추가 2026-03-09 (월) 10:48:26

수면 타이머 추가, 인기차트 재생 옵션 추가

기능추가 2026-03-08 (일) 23:25:42

플레이리스트 무한 스크롤 에서 페이지션 으로 변경

기능추가 2026-03-08 (일) 19:43:37

카카오톡 밴드 페이스북 라인 텔레그램 왓츠앱 링크 복사 X (트위터) 이메일 공유기능 추가

기능추가 2026-03-08 (일) 18:59:12

인기차트 최근재생 기능 추가

기능추가 2026-03-08 (일) 11:14:19

유튜브 동영상에 찜 기능을 추가 하였습니다.

댓글 (4)

로그인 후 댓글을 남길 수 있습니다.
연
2026-04-23 (목) 09:46:17

와우... 정말 대단하십니다..

SmartWeb

좋은 평가 감사합니다^^

리자

식사 후 트로트 들으면서 일하고 있습니다 ^^

SmartWeb

감사합니다^^..ㅎ