HTML 오디오
HTML에서 소리를 재생하는 방법이 많습니다.
문제, 문제, 그리고 해결책
HTML에서 오디오를 재생하는 것은 쉽지 않습니다!
모든 브라우저(인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오퍼라)와 모든 하드웨어(PC, 맥, 아이패드, 아이폰)에서 오디오 파일을 재생할 수 있도록 많은 기술을 익혀야 합니다.
이 장에서 CodeW3C.com은 문제와 해결책을 요약해 드립니다.
플러그인 사용
브라우저 플러그인은 브라우저 기능을 확장하는 작은 컴퓨터 프로그램입니다.
플러그인은 많은 용도가 있습니다: 음악 재생, 지도 표시,은행 계정��정, 입력 제어 등.
<object> 또는 <embed> 태그를 사용하여 플러그인을 HTML 페이지에 추가할 수 있습니다.
이 태그들은 자원(보통 HTML이 아닌 자원)의 컨테이너를 정의하며, 타입에 따라 브라우저가 표시하거나 외부 플러그인이 표시합니다.
<embed> 요소 사용
<embed> 태그는 외부(HTML이 아닌) 내용의 컨테이너를 정의합니다.(이것은 HTML5 태그로, HTML4에서는 불법적이지만 모든 브라우저에서는 작동합니다).
아래의 코드 스니펫은 웹 페이지에 내장된 MP3 파일을 표시할 수 있습니다:
예제
<embed height="100" width="100" src="song.mp3" />
문제：
- <embed> 태그는 HTML 4에서는 무효합니다. 페이지는 HTML 4��정을 통과할 수 없습니다.
- 다른 브라우저는 오디오 형식에 대한 지원이 다릅니다.
- 브라우저가 파일 형식을 지원하지 않고 플러그인이 없다면 이 오디오를 재생할 수 없습니다.
- 사용자의 컴퓨터에 플러그인이 설치되지 않았다면 오디오를 재생할 수 없습니다.
- 이 파일을 다른 형식으로 변환하면 모든 브라우저에서 재생되지 않습니다.
주의事项：HTML5 <!DOCTYPE html>를 사용하여��증 문제를 해결하십시오.
<object> 요소 사용
<object tag> 태그는 외부(HTML이 아닌) 내용의 컨테이너를 정의할 수 있습니다.
아래의 코드 스니펫은 웹 페이지에 내장된 MP3 파일을 표시할 수 있습니다:
예제
<object height="100" width="100" data="song.mp3"></object>
문제：
- 다른 브라우저는 오디오 형식에 대한 지원이 다릅니다.
- 브라우저가 파일 형식을 지원하지 않고 플러그인이 없다면 이 오디오를 재생할 수 없습니다.
- 사용자의 컴퓨터에 플러그인이 설치되지 않았다면 오디오를 재생할 수 없습니다.
- 이 파일을 다른 형식으로 변환하면 모든 브라우저에서 재생되지 않습니다.
HTML5 <audio> 요소 사용
<audio> 요소는 HTML5 요소로, HTML 4에서는 불법적이지만 모든 브라우저에서는 작동합니다.
예제
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> 여러분의 브라우저는 이 오디오 형식을 지원하지 않습니다. </audio>
위의 예제는 mp3 파일을 사용하여 Internet Explorer, Chrome 및 Safari에서는 작동합니다.
Firefox와 Opera에서도 동일하게 작동하도록 ogg 형식의 파일을 추가했습니다. 실패하면 오류 메시지가 표시됩니다.
문제：
- <audio> 태그는 HTML 4에서는 무효합니다. 여러분의 페이지는 HTML 4��정을 통과할 수 없습니다.
- 오디오 파일을 다른 형식으로 변환해야 합니다.
- <audio> 요소는 오래된 브라우저에서는 작동하지 않습니다.
주의事项：HTML5 <!DOCTYPE html>를 사용하여��증 문제를 해결하십시오.
최고의 HTML 솔루션
예제
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
위의 예제는 두 가지 다른 오디오 형식을 사용합니다. HTML5 <audio> 요소는 mp3 또는 ogg로 오디오를 재생하려고 시도합니다. 실패하면 코드는 <embed> 요소를 시도합니다.
문제：
- 오디오를 다른 형식으로 변환해야 합니다.
- <audio> 요소는 HTML 4 및 XHTML에서��증되지 않습니다.
- <embed> 요소는 HTML 4 및 XHTML에서��증되지 않습니다.
- <embed> 요소는 오류 메시지를 표시할 수 없습니다.
주의事项：HTML5 <!DOCTYPE html>를 사용하여��증 문제를 해결하십시오.
웹 사이트에 오디오를 추가하는 가장 간단한 방법
웹 페이지에 오디오를 추가하는 가장 간단한 방법은 무엇인가요?
야후의 미디어 플레이어는 그 중 하나입니다.
야후 미디어 플레이어를 사용하는 것은 다른 접근 방식입니다. 곡 재생 작업을 야후가 단순히 수행하면 됩니다.
그것은 mp3와 다양한 다른 형식을 재생할 수 있습니다. 단一行의 코드로 웹 페이지에 추가할 수 있으며, HTML 페이지를 전문적인 플레이리스트로 변환할 수 있습니다.
야후 미디어 플레이어
예제
<a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>
야후 플레이어를 사용하는 것은 무료입니다. 사용하려면 이 스크립트를 웹 페이지 하단에 삽입해야 합니다：
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
그런 다음 MP3 파일의 링크를 HTML에 단순히 연결하면 됩니다. 자바스크립트가 자동으로 각 곡에 재생 버튼을 생성합니다：
<a href="song1.mp3">Play Song 1</a> <a href="song2.mp3">Play Song 2</a> ... ... ...
야후 미디어 플레이어는 사용자에게 작은 재생 버튼을 제공합니다. 전체 플레이어가 아니라는 것입니다. 그러나 버튼을 클릭하면 전체 플레이어가弹出됩니다.
이 플레이어는 항상 창 하단에 고정됩니다. 클릭하면 이동할 수 있습니다.
히트링크 사용
웹 페이지에 미디어 파일을 가리키는 히트링크가 포함되어 있으면, 대부분의 브라우저가 파일을 재생하기 위해 "보조 애플리케이션"을 사용합니다.
다음 코드 단편은 mp3 파일을 가리키는 링크를 보여줍니다. 사용자가 링크를 클릭하면 브라우저가 파일을 재생하기 위해 "보조 애플리케이션"을 시작합니다:
예제
<a href="song.mp3">소리 재생</a>
인라인 소리
웹 페이지에 소리를 포함하거나 웹 페이지의 일부로 사용할 때, 그것은 인라인 소리라고 합니다.
웹 애플리케이션에서 인라인 소리를 사용할 계획이면, 많은 사람들이 인라인 소리가 괴로운 것으로 느낄 수 있음을 인식해야 합니다. 또한, 사용자가 브라우저에서 인라인 소리 옵션을 껐을 수 있음을 유의해야 합니다.
사용자가 인라인 소리를 들려고 원할 때만 포함하는 것이 가장 좋습니다. 긍정적인 예로, 사용자가 녹음을 들려고 클릭하면 페이지가 열리고 녹음이 재생되는 경우가 있습니다.
HTML 4.01 멀티미디어 태그
| 태그 | 설명 |
|---|---|
| <applet> | 비추천됩니다. 내장 applet를 정의합니다. |
| <embed> | HTML4에서는 비추천하지만, HTML5에서는 허용됩니다. 내장 객체를 정의합니다. |
| <object> | 내장 객체를 정의합니다. |
| <param> | 객체의 매개변수를 정의합니다. |
