English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
오디오는 HTML에서 다양한 방식으로 재생할 수 있습니다.
HTML에서 오디오를 재생하는 것은 쉽지 않습니다!
모든 브라우저에서(인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오퍼라)와 모든 하드웨어에서(PC, 맥, 아이패드, 아이폰) 오디오 파일이 재생될 수 있도록 많은 기술을 익혀야 합니다.
이 장에서는 기본 튜토리얼에서 문제와 해결 방법을 요약했습니다.
브라우저 플러그인은 브라우저 기능을 확장하는 작은 컴퓨터 프로그램입니다.
플러그인은 <object> 태그나 <embed> 태그를 사용하여 페이지에 추가할 수 있습니다.
이 태그들은 자원(대개 HTML이 아닌 자원)의 컨테이너를 정의하며, 타입에 따라 브라우저에서 표시되거나 외부 플러그인에서 표시됩니다.
<embed> 태그는 외부(HTML이 아닌) 내용의 컨테이너를 정의합니다. (이것은 HTML5 태그는 HTML에서4 중에서는 불법적이지만 모든 브라우저에서 유효합니다).
아래 코드 스크립트는 웹 페이지에 내장된 MP를 표시할 수 있습니다.3 파일：
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3></object> <p>오디오를 들을 수 없다면, 컴퓨터나 브라우저가 파일 형식을 지원하지 않을 수도 있습니다.</p> <p>이거나 스피커를 열지 않았을 수도 있습니다.</p> </body> </html>테스트를 보세요. ‹/›
HTML에서 <embed> 태그는 4 중에서는 유효하지 않지만 모든 브라우저에서 유효합니다. 4 검증하십시오.
다른 브라우저는 오디오 형식을 다르게 지원합니다.
브라우저가 파일 형식을 지원하지 않으면 플러그인이 없이는 이 오디오를 재생할 수 없습니다.
사용자의 컴퓨터에 플러그인이 설치되지 않으면 오디오를 재생할 수 없습니다.
그 파일을 다른 형식으로 변환하면도 모든 브라우저에서 재생할 수 없습니다.
<object tag> 태그는 외부(HTML이 아닌) 내용의 컨테이너를 정의할 수도 있습니다.
아래 코드 스크립트는 웹 페이지에 내장된 MP를 표시할 수 있습니다.3 파일：
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3></object> <p>오디오를 들을 수 없다면, 컴퓨터나 브라우저가 파일 형식을 지원하지 않을 수도 있습니다.</p> <p>이거나 스피커를 열지 않았을 수도 있습니다.</p> </body> </html>테스트를 보세요. ‹/›
다른 브라우저는 오디오 형식을 다르게 지원합니다.
브라우저가 파일 형식을 지원하지 않으면 플러그인이 없이는 이 오디오를 재생할 수 없습니다.
사용자의 컴퓨터에 플러그인이 설치되지 않으면 오디오를 재생할 수 없습니다.
그 파일을 다른 형식으로 변환하면도 모든 브라우저에서 재생할 수 없습니다.
HTML5 <audio> 요소는 HTML5 요소는 HTML에서 4 중에서는 불법적이지만 모든 브라우저에서 유효합니다.
<audio> 요소 모든現대 브라우저에서 작동합니다.
브라우저 호환성의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.
| 요소 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
이제 <audio> 태그를 사용하여 MP를 설명하겠습니다.3 파일(인터넷 익스플로러, 크롬, 사파리에서는 유효합니다)과 함께 OGG 형식 파일도 추가했습니다. 실패하면 오류 텍스트 메시지를 표시합니다:
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> 브라우저가 이 오디오 형식을 지원하지 않습니다. </audio> </body> </html>테스트를 보세요. ‹/›
HTML에서 <audio> 태그는 4 중에서는 무효입니다. 페이지는 HTML을 통해 페이지를 통과할 수 없습니다. 4 검증하십시오.
오디오 파일을 다른 형식으로 변환해야 합니다.
<audio> 요소는 오래된 브라우저에서 작동하지 않습니다.
아래 예제는 두 가지 다른 오디오 형식을 사용합니다. HTML5 <audio> 요소는 mp3 형식으로 재생을 시도합니다.3 mp3 또는 ogg로 오디오를 재생합니다. 실패하면 코드가 <embed> 요소를 시도합니다.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>기본 튜토리얼(oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="/run/html/horse.mp3"> </audio> </body> </html>테스트를 보세요. ‹/›
오디오를 다른 형식으로 변환해야 합니다.
<embed> 요소는 오류 메시지를 표시할 수 없습니다.
웹 페이지가 미디어 파일을 가리키는 하이퍼링크를 포함하면 대부분의 브라우저가 "보조 애플리케이션"을 사용하여 파일을 재생합니다.
다음 코드 부분은 mp3 파일의 링크입니다. 사용자가 이 링크를 클릭하면 브라우저가 "보조 애플리케이션"을 시작하여 파일을 재생합니다:
<a href="/run/html/horse.mp3">재생하려면 오디오</a>테스트를 보세요. ‹/›
웹 페이지에 오디오를 포함하거나 웹 페이지의 일부로 사용할 때, 이를 내장 오디오라고 합니다.
웹 애플리케이션에서 내장 오디오를 사용할 계획이면, 많은 사람들이 내장 오디오가 괴로운 것으로 느끼는 것을 인식해야 합니다. 또한, 사용자가 브라우저의 내장 오디오 옵션을 껐을 수도 있습니다.
사용자가 내장 오디오를 들으려고 원할 때만 포함하는 것이 가장 좋습니다. 긍정적인 예시는 사용자가 녹음을 듣고 링크를 클릭하면 페이지가 열리고 녹음이 재생되는 것입니다.
New : HTML5 새 태그
| 태그 | 설명 |
| <embed> | 내장 객체를 정의합니다. HTML4 불추천됩니다. HTML5 내장됩니다. |
| <object> | 내장 객체를 정의합니다. |
| <param> | 객체의 매개변수를 정의합니다. |
| <audio>HTML5 | 오디오 내용을 정의합니다. |
| <video>HTML5 | 비디오나 영화를 정의합니다. |
| <source>HTML5 | media 요소의 멀티미디어 자원 (<video> 및 <audio>)을 정의합니다. |
| <track>HTML5 | media 요소의 자막 파일 또는 텍스트를 포함하는 다른 파일을 정의합니다. (<video> 및 <audio>) |