멀티미디어: Audio (웹에서 소리 지르기)

핵심 개념

배경 음악이나 효과음을 넣을 때 사용해요. 재생, 일시정지 버튼을 브라우저가 자동으로 만들어준답니다.

코드 분석

HTML5📋 코드 (4줄)

<audio controls>
  <source src='https://www.w3schools.com/html/horse.mp3' type='audio/mpeg'>
  소리를 재생할 수 없습니다.
</audio>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 audio 태그 코드에서 자동재생 정책·접근성·iOS Safari 호환 문제를 찾아
프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

<audio> 태그로 음악 플레이어를
재생/일시정지/볼륨/진행바까지 포함해
실전 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 audio 구현을 분석해서
자동재생 차단, iOS 호환, 접근성, 데이터 사용량을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 웹 오디오 시장에서
HTML <audio>가 Web Audio API, Howler.js 대비
어떤 영역에 적합한지 솔직하게 알려줘.

⭐ 이것만 기억하세요

멀티미디어: Audio (웹에서 소리 지르기)는 이 3가지만 확실히 잡으세요

1.오디오 파일을 직접 링크하면 브라우저별로 재생 방식이 달라져 사용자 경험이 일관되지 않습니다

2.audio 태그에 controls 속성을 추가하면 재생·일시정지·볼륨 UI가 브라우저 기본으로 제공됩니다

3.다음 챕터에서 페이지 간 이동의 핵심인 링크와 앵커를 배웁니다

진행도 11 / 33