실행 가능한 HTML 문서: audio 태그

Q: HTML 페이지에 소리를 넣으려면 어떻게 하나요?

를 쓰세요. controls 속성은 재생 버튼, 타임라인, 볼륨이 있는 브라우저 플레이어를 보여 줘요. 이게 없으면 요소가 보이지 않아요.

Q: 오디오가 왜 자동 재생되지 않나요?

브라우저는 사용자가 페이지와 상호작용하기 전에 소리와 함께 시작하는 오디오를 막아요. 대신 클릭에서 audio.play()로 재생을 시작하세요. 음소거된 요소는 자동 재생될 수 있지만, 오디오에서는 쓸모 있는 경우가 드물어요.

Q: HTML에서는 어떤 오디오 형식을 써야 하나요?

MP3는 현재 모든 브라우저에서 재생되니 파일 하나만 쓴다면 안전한 선택이에요. .m4a 파일의 AAC도 널리 지원돼요. 형식을 여러 개 제공하려면 요소를 쓰세요.

Q: HTML에서 오디오를 반복 재생하려면 어떻게 하나요?

loop 속성을 추가하세요. 처럼요. 파일이 끝나면 처음부터 다시 시작해요.

Q: JavaScript로 소리를 재생하려면 어떻게 하나요?

오디오 요소를 만들거나 선택해서 play()를 호출하세요. 예를 들어 클릭 핸들러 안에서 new Audio('click.mp3').play()처럼요. play()는 브라우저가 재생을 막으면 거부되는 프로미스를 돌려줘요.

오디오 넣는 법

<audio> 요소가 소리 파일을 가리키게 하고 controls를 추가하세요.

<audio src="song.mp3" controls></audio>

controls는 브라우저의 플레이어를 보여 줘요. 재생과 일시 정지, 타임라인, 시간, 볼륨 조절이에요. controls가 없으면 요소는 공간을 전혀 차지하지 않아요. 미리보기는 내 컴퓨터의 파일을 불러올 수 없어서, 이 예제는 스크립트로 브라우저에서 짧은 WAV 파일을 만들어 src로 써요. 재생을 눌러 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

브라우저마다 자체 플레이어를 그리기 때문에 Chrome, Firefox, Safari에서 플레이어 모양이 달라요. controls를 지우면 플레이어가 사라지지만, 오디오는 JavaScript로 재생할 수 있게 그대로 있어요.

audio 속성

속성	하는 일
`controls`	브라우저의 플레이어를 보여 줌
`autoplay`	로드되면 재생을 시도함(소리가 있으면 막힘, 아래 참고)
`loop`	파일이 끝나면 다시 시작
`muted`	볼륨을 끈 채로 시작
`preload`	`none`(재생 전까지 아무것도 내려받지 않음), `metadata`(길이만), `auto`(브라우저가 정함)
`src`	재생할 파일. 여러 형식은 `<source>` 자식을 쓰세요

팟캐스트 에피소드 목록처럼 플레이어가 많은 페이지에는 preload="none"이나 "metadata"를 쓰세요. 그래야 페이지가 처음부터 모든 파일을 내려받지 않아요.

형식과 대체 수단

<source>로 여러 파일을 나열하면 브라우저가 지원하는 첫 번째 파일을 재생해요. 요소 안의 텍스트는 <audio>를 지원하지 않는 브라우저에서만 보여요.

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

형식	MIME 타입	참고
MP3	`audio/mpeg`	현재 모든 브라우저에서 재생됨. 하나만 고른다면 안전한 선택
AAC(`.m4a`)	`audio/mp4`	널리 지원되고, 작은 크기로도 음질이 좋음
Opus 또는 Vorbis(`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	파일이 작음. Safari 지원이 버전마다 달라서 MP3를 대체 수단으로 나열하세요
WAV	`audio/wav`	압축하지 않아서 큼. 짧은 효과음에는 괜찮음

자동 재생이 안 되는 이유

브라우저는 페이지가 스스로 소리를 내기 시작하게 두지 않아요. autoplay나 사용자가 클릭하거나 탭하기 전에 play()를 호출하는 건 거부돼요. 이 예제는 로드될 때 재생을 시도하고 결과를 출력한 뒤 버튼을 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

보통은 NotAllowedError가 보일 거예요. 브라우저가 재생을 막을 때 주는 오류예요. 클릭이 허락으로 인정되기 때문에 버튼은 동작해요. 브라우저마다 추가 규칙이 있으니(예를 들어 Chrome은 미디어를 자주 재생하는 사이트를 기억해요) 자동 재생에 절대 기대지 마세요. 소리는 사용자 동작에서 시작하고, play()가 돌려주는 프로미스는 항상 처리하세요.

new Audio(url)은 페이지에 추가하지 않고 JavaScript에서 오디오 요소를 만들어서, 효과음에 편리해요.

컨트롤 직접 만들기

controls를 빼서 내장 플레이어를 숨기고, JavaScript API로 요소를 다루세요. play(), pause(), currentTime, duration, volume, 그리고 timeupdate와 ended 같은 이벤트예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

버튼은 진짜 <button>이라서 키보드로도 동작하고, 라벨이 Play와 Pause 사이에서 바뀌어요. 파일이 끝나면 브라우저가 요소를 일시 정지하고 ended를 발생시켜서, 버튼이 알아서 Play로 돌아와요. 컨트롤을 직접 만들면 내장 컨트롤이 공짜로 주던 것도 떠맡게 돼요. 키보드 지원, 라벨, 볼륨 조절이에요.

접근성

소리가 저절로 시작되게 하지 마세요. 스크린 리더를 방해하고 사람들을 놀라게 해요. 오디오는 클릭에서 시작하세요.
팟캐스트와 말소리 오디오에는 대본을 제공하세요. 플레이어 아래에 텍스트 버전 링크 하나면 충분하고, 검색 엔진도 읽을 수 있어요.
controls를 유지하거나 진짜 버튼으로 컨트롤을 만들어서 키보드로 오디오를 멈출 수 있게 하세요.

소리가 있는 동영상, 자막, 포스터는 video 태그 페이지를 보세요. <audio>는 속성 대부분과 JavaScript API 전체를 video와 공유해요.

자주 하는 실수

controls를 빼먹음. 이게 없으면 요소가 보이지 않아서 아무 일도 안 일어난 것처럼 보여요.
autoplay가 동작할 거라고 기대함. 클릭에서 재생을 시작하고 play()의 프로미스를 처리하세요.
잘못된 파일 경로나 타입. 파일 URL을 직접 열어 확인하고, type을 실제 형식에 맞추세요(MP3는 audio/mpeg).
긴 목록의 모든 파일을 불러옴. preload="none"이나 "metadata"를 쓰세요.
멈출 수 없는 배경 음악. 항상 눈에 보이는 일시 정지 방법을 주세요.

자주 묻는 질문

HTML 페이지에 소리를 넣으려면 어떻게 하나요?

<audio src="song.mp3" controls></audio>를 쓰세요. controls 속성은 재생 버튼, 타임라인, 볼륨이 있는 브라우저 플레이어를 보여 줘요. 이게 없으면 요소가 보이지 않아요.

오디오가 왜 자동 재생되지 않나요?

브라우저는 사용자가 페이지와 상호작용하기 전에 소리와 함께 시작하는 오디오를 막아요. 대신 클릭에서 audio.play()로 재생을 시작하세요. 음소거된 요소는 자동 재생될 수 있지만, 오디오에서는 쓸모 있는 경우가 드물어요.

HTML에서는 어떤 오디오 형식을 써야 하나요?

MP3는 현재 모든 브라우저에서 재생되니 파일 하나만 쓴다면 안전한 선택이에요. .m4a 파일의 AAC도 널리 지원돼요. 형식을 여러 개 제공하려면 <source> 요소를 쓰세요.

HTML에서 오디오를 반복 재생하려면 어떻게 하나요?

loop 속성을 추가하세요. <audio src="rain.mp3" controls loop>처럼요. 파일이 끝나면 처음부터 다시 시작해요.

JavaScript로 소리를 재생하려면 어떻게 하나요?

오디오 요소를 만들거나 선택해서 play()를 호출하세요. 예를 들어 클릭 핸들러 안에서 new Audio('click.mp3').play()처럼요. play()는 브라우저가 재생을 막으면 거부되는 프로미스를 돌려줘요.

HTML 오디오 플레이어를 꾸밀 수 있나요?

조금만 돼요. 너비, margin, display는 정할 수 있지만, 안의 버튼은 브라우저가 그려서 브라우저마다 달라 보여요. 원하는 모양을 내려면 컨트롤을 숨기고 버튼과 오디오 JavaScript API로 직접 만드세요.

HTML audio 태그: controls, 자동 재생, 반복 재생