TutuAudio · 삽입 가능한 컴포넌트
코드 한 줄로,몇 초 만에 사이트에 오디오 편집기를 추가하세요
TutuAudio 편집기(자르기 / 노이즈 제거 / 믹싱 / 마스터링)를 어떤 웹사이트에나 삽입하세요. 방문자는 사이트 내에서 바로 오디오를 편집할 수 있고, 테마는 구성 가능하며, 제품 업데이트는 자동으로 적용됩니다 — 당신은 유지 관리가 전혀 필요 없습니다.
복사해서 붙여넣기 · 페이지의
</body> 태그 앞에 <script src="https://tutuaudio.com/embed.js"
data-key="pk_live_YOUR_KEY"
data-mount="#aa-editor" defer></script> pk_live_YOUR_KEY를 콘솔에서 생성한 키로 교체하세요. 컨테이너 #aa-editor에는 너비와 높이가 필요합니다. 도메인 허용/차단 목록을 설정하여 당신의 사이트에서만 표시되도록 할 수 있습니다.
실시간으로 체험하기
아래 버튼을 클릭하여 삽입된 오디오 편집기를 바로 여기서 체험해 보세요.
JS API (콜백 / 커스터마이징이 필요할 때)
<script src="https://tutuaudio.com/embed.js"></script>
<script>
const aa = TutuAudio.mount('#aa-editor', {
key: 'pk_live_YOUR_KEY',
theme: 'auto', // auto | light | dark
onSave: (file) => {
// file.dataUrl = the finished mix (WAV, base64)
upload(file.dataUrl);
}
});
aa.open('https://your.site/sound.mp3'); // import an audio clip
</script>전체 구성 옵션
| 매개변수 | 타입 | 설명 |
|---|---|---|
| key | string | 당신의 공개 키 pk_ (콘솔에서 생성). 필수. |
| theme | 'auto'|'light'|'dark' | 테마. auto는 호스트/시스템의 밝게 또는 어둡게 모드를 따릅니다. |
| saveText | string | 「완료」 버튼 문구(기본값 「완료 후 반환」, ≤16자). onSave가 설정되면 이 버튼은 편집기의 기본 상단 바에 표시됩니다. |
| hideSuite | boolean | 패밀리 런처를 숨깁니다(삽입 시 기본적으로 숨김, 방해 요소 감소). |
| hideAccount | boolean | 로그인/계정 컨트롤을 숨깁니다(삽입 시 기본적으로 숨김. 호스트가 로그인을 관리). |
| hideExport | boolean | 편집기 내장 내보내기/다운로드 버튼을 숨깁니다(「완료 후 반환」만 사용할 때). |
| hideLang | boolean | 언어 전환을 숨깁니다(호스트가 tt_locale로 제어). |
| hideTheme | boolean | 밝게/어둡게 전환을 숨깁니다(호스트가 tt_theme로 제어). |
메서드
aa.open(url, name?)오디오 클립을 트랙으로 가져옵니다(오디오/비디오/이미지 url 또는 dataURL).aa.export()믹스를 오프라인으로 렌더링하고 WAV로 내보냅니다 → Promise<{dataUrl,mime,size}>.aa.setTheme('dark')런타임에 테마를 전환합니다.aa.destroy()컴포넌트를 언마운트합니다(iframe 제거).
이벤트 콜백
onReady()편집기가 준비되었습니다.onSave(file)사용자가 「완료」를 클릭 → file.dataUrl은 완성된 믹스(WAV)입니다.onError(e)e.message는 사람이 읽을 수 있는 형식입니다(미활성화 / 권한 없음 / 로드 실패).onClose()전체 화면 오버레이가 닫혔습니다.
보안 · 자동 업데이트
- · 키는 공개됩니다. 삽입 사이트 허용/차단 목록으로 도용을 방지합니다(차단 목록 우선). 언제든지 일시 중지하거나 재개할 수 있습니다.
- · 편집기는 TutuAudio 자체 도메인에서 실행됩니다(격리). 당신의 페이지는 어떤 TutuAudio 자격 증명에도 접근할 수 없습니다.
- · 컴포넌트는 TutuAudio가 자체 호스팅하고 자동 업데이트합니다 —— 기능 업그레이드에 당신 쪽의 코드 변경이 필요 없으며, 유지 관리는 전혀 없습니다.