# APNG Lip Sync Tool 개발기 - v12: 재생 플레이어 UI

## 개요

립싱크 애니메이션과 음성을 동기화하여 재생하는 웹 플레이어를 구현합니다.

## HTML 구조

```html
<div id="animation-preview">
    <img src="/characters/{name}/rest.png" id="lipsync-image">
</div>
<audio id="lipsync-audio" style="display:none"></audio>
<div class="controls">
    <button onclick="playLipsync()">Play</button>
    <button onclick="stopLipsync()">Stop</button>
</div>
```

## JavaScript 플레이어

```javascript
let audio = document.getElementById('lipsync-audio');
let image = document.getElementById('lipsync-image');
let timings = [];

function playLipsync() {
    audio.play();
    startVisemeSync();
}

function startVisemeSync() {
    const syncInterval = setInterval(() => {
        if (audio.paused || audio.ended) {
            clearInterval(syncInterval);
            image.src = `/characters/${character}/rest.png`;
            return;
        }

        const currentTime = audio.currentTime * 1000;
        const viseme = getVisemeAtTime(timings, currentTime);
        image.src = `/characters/${character}/${viseme}.png`;
    }, 50); // 20fps 체크
}

function getVisemeAtTime(timings, timeMs) {
    for (const t of timings) {
        if (t.start_ms <= timeMs && timeMs < t.end_ms) {
            return t.viseme;
        }
    }
    return 'rest';
}
```

## 프리로딩

부드러운 재생을 위해 모든 viseme 이미지를 미리 로드:

```javascript
function preloadVisemes(character) {
    const visemes = ['rest', 'A', 'E', 'I', 'O', 'U', 'C', 'F', 'L', 'M', 'W'];
    visemes.forEach(v => {
        const img = new Image();
        img.src = `/characters/${character}/${v}.png`;
    });
}
```

---

*다음: v13 - 스트리밍 효과 구현*