---
type: snippet
tags: ['mp4', 'file-reader', 'hdlr', 'ffmpeg']
embed: https://stackblitz.com/edit/vitejs-vite-zmgejjyi?file=src%2FApp.tsx
status: release
ctime: 2025-01-31
mtime: 2025-01-31
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://techblog.lycorp.co.jp/ko/check-mp4-file-has-audio-using-filereader-in-front-end">
프런트엔드 영역에서 FileReader를 이용해 MP4 파일 내 오디오 존재 여부 확인하기
</QuoteLink>

- 프런트엔드(클라이언트)에서 MP4 파일의 오디오 존재 여부를 확인하기
- 브라우저 API 사용 시 호환성 문제 발생 (Chrome, Safari, Firefox 각각 다른 API 사용)
  - MP4 파일의 구조를 분석하는 방법으로 방향 전환
    - [hdlr](https://developer.apple.com/documentation/quicktime-file-format/metadata_handler_atom) 아톰에서 오디오 존재 여부를 나타내는 `Component subtype` 필드가 `soun`일 경우 오디오가 존재할 것임.
    - MP4 파일의 특정 바이트를 선택적으로 요청하기 위해 [Range](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Range) 필드 사용.
    - 다양한 파일 크기에 따라 'soun'의 예상 위치를 조사하고, 적절한 범위 값 설정.
- [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader)를 사용하여 서버에서 응답받은 바이너리 데이터를 읽고, 이를 분석해 오디오 여부 확인.
  - 오디오 정보가 발견되지 않으면 추가 데이터 요청하여 확인 범위를 증가시켜 반복.

---

```ts
await ffmpeg.writeFile('input.mp4', await fetchFile(file))
await ffmpeg.ffprobe(['-i', 'input.mp4', '-show_streams', '-o', 'output.txt'])

const data = await ffmpeg.readFile('output.txt')
```

...하지만 [ffmpeg](https://www.ffmpeg.org/)의 중요성을 깨달았다.