순수 HTML 및 JavaScript로 무한 생성 음악 엔진 구축 (마코프 기반)

Source: Dev.to

브라우저에서 생성 음악 시스템을 실험해 왔으며, 최근 완성한 프로젝트를 공유하고 싶습니다.

이것은 순수 HTML & JavaScript만을 사용해 만든 무한 앰비언트 음악 생성기이며, Web Audio API를 통해 완전히 브라우저에서 실행됩니다. 백엔드도, 프레임워크도 없습니다 — 알고리즘과 사운드 디자인만으로 구현했습니다.

🎼 무엇을 하나요?

엔진은 다음을 활용해 부드러운 앰비언트 음악을 지속적으로 생성합니다:

• 마코프 스타일의 음 전이
• 두 개의 클래식 기타 레이어
• 피아노 및 앰비언트 배경 텍스처
• 베이스와 미묘한 리듬 요소
• 감정 기반 다이내믹스 및 템포 변조

각 세션은 절대 반복되지 않으며 음악이 끝없이 진화합니다.

🔊 사운드 디자인 하이라이트

• 알고리즘 기반 아르페지오 및 멜로딕 프래그먼트
• Paulstretch 스타일의 앰비언트 레이어
• 실시간 EQ, 필터 및 리버브 제어
• 실시간 피드백을 위한 FFT 스펙트럼 시각화
• 장시간 청취 세션을 위한 부드러운 전환

다음 상황에 완벽합니다:

• 공부
• 코딩
• 명상
• 배경 집중

🛠️ 기술 스택

• HTML
• Vanilla JavaScript
• Web Audio API
• Tone.js
• 알고리즘 작곡 로직 (마코프 영감)

▶️ YouTube 라이브 데모

이 엔진을 24/7 라이브 스트림으로 운영하고 있습니다: (link to the YouTube stream)

💡 왜 만들었나요?

플러그인이나 네이티브 앱 없이 브라우저 기반 오디오가 얼마나 멀리 갈 수 있는지 탐구하고 싶었습니다. 이 프로젝트는 최신 JavaScript만으로도 실시간으로 몰입감 있고 진화하는 음악 시스템을 만들 수 있음을 보여줍니다.

관심 있는 분야가 있다면:

• 크리에이티브 코딩
• 생성 예술
• 오디오 프로그래밍
• 실험 음악 도구

여러분의 생각을 듣고 싶습니다.

들어주셔서 감사합니다 🎧