Show HN: Web Audio Studio – Web Audio API 그래프용 시각적 디버거

Source: Hacker News

개요

브라우저 기반 도구를 개발하고 있습니다. 이 도구는 Web Audio API 그래프를 탐색하고 디버깅할 수 있게 해줍니다.

Web Audio Studio는 실제 Web Audio API 코드를 작성하고 실행하며, 실행 시 생성되는 그래프를 인터랙티브한 시각적 표현으로 보여줍니다. connect() 호출을 머릿속으로 추적하는 대신, 그래프의 실제 구조를 확인하고, 신호 흐름을 따라가며, 오디오가 재생되는 동안 파라미터를 조정할 수 있습니다.

기능

• 일반적인 노드 타입에 대한 내장 시각화:
  • 파형
  • 필터 응답
  • Analyser 시간 및 주파수 뷰
  • Compressor 전송 곡선
  • Waveshaper 왜곡
  • 공간 위치 지정
  • Delay 타이밍
  • …등등
• 두 노드 사이에 AnalyserNode를 삽입하여 체인 내 정확한 지점의 신호를 검사할 수 있습니다.
• 약 20개의 템플릿(기본 오실레이터 설정, FM/AM 합성, 컨볼루션 리버브, IIR 필터, 공간 오디오 등) 제공 – 작동 예제를 기반으로 시작하고 수정할 수 있어 처음부터 모두 만들 필요가 없습니다.
• 브라우저에서 완전히 로컬로 실행 — 회원가입 필요 없고 백엔드도 없습니다.

동기

비교적 복잡한 Web Audio 그래프를 다루면서 구조와 신호 흐름을 파악하기가 점점 어려워졌던 것이 동기가 되었습니다. 대부분의 튜토리얼은 작은 코드 조각만 보여주지만, 실제 프로젝트는 금방 복잡해져서 검토하기가 힘듭니다. 네이티브 Web Audio API와 가깝게 유지하면서도 런타임 그래프를 눈에 보이고 검사할 수 있는 무언가가 필요했습니다.

상태

현재는 초기 알파 버전이며 데스크톱 전용입니다.

피드백

피드백을 정말로 환영합니다 — 특히 프로덕션에서 Web Audio API를 사용했거나 오디오 도구를 만든 경험이 있는 분들의 의견을 기다립니다. 여기서 댓글을 남기거나 앱 내부의 피드백 버튼을 이용해 주세요.

https://webaudio.studio

Comments: (Points: 14)