HTML5에서 동영상과 마찬가지로 오디오 파일을 쉽게 통합할 수 있습니다. HTML5는 이를 위해 오디오와 함께 별도의 요소를 제공합니다.
<audio src="song.mp3"> 브라우저가 오디오 요소를 지원하지 않습니다 </audio>.
재생할 파일의 이름은 src 속성을 통해 오디오 요소에 할당됩니다. 그러나 아직 파일이 재생되지는 않습니다. 이를 위해서는 컨트롤 요소가 필요합니다.
컨트롤 요소를 표시하려면 오디오 요소에 컨트롤 속성을 할당합니다.
<audio src="song.mp3" controls> 브라우저가 오디오 요소 </audio>를 지원하지 않습니다.
브라우저에서 다음과 같이 표시되어야 합니다:
컨트롤이 누락된 경우 오디오를 통해 통합된 요소가 표시되지 않습니다. JavaScript를 사용하여 자신만의 컨트롤 요소를 삽입하려면 이 속성을 생략하는 것이 좋습니다.
안타깝게도 오디오 요소의 사용도 문제없이 사용할 수 없습니다. 다시 한 번 말하지만, 이는 다양한 형식을 지원하는 브라우저의 잘못입니다. 다음 표는 이와 관련된 현재 상태를 보여줍니다.
| 브라우저 | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | 아니요 | yes | yes | 아니요 | 아니요 |
Safari | yes | 아니요 | yes | yes | 예 |
Chrome | yes | yes | 아니요 | 아니요 | 아니요 |
Opera | 아니요 | yes | yes | yes | 아니요 |
어떻게 해야 하나요? 오디오 요소는 추가 소스 요소를 정의할 수 있는 옵션도 제공합니다. 그런 다음 이러한 요소에는 각 브라우저에 맞는 다양한 형식이 할당됩니다. 다음은 예시입니다:
<오디오 컨트롤> <소스 src="song.mp3"> <소스 src="song.ogg"> </audio>
src 속성에는 각각의 파일이 할당되며, 해당 파일은 다양한 형식으로 제공됩니다.컨트롤 외에도 오디오 요소에는 다른 속성이 있습니다. 그중 하나가 자동 재생입니다.
<오디오 컨트롤 자동 재생> <source src="song.mp3"> <source src="song.ogg"> </audio>
이 속성을 설정하면 오디오 파일이 로드되는 즉시 자동으로 재생이 시작됩니다. 오디오 파일 재생 시기는 방문자가 직접 결정해야 하므로 이 속성은 일반적으로 설정되지 않습니다.
루프 속성도 흥미롭습니다. 이 속성은 파일이 반복 재생되도록 합니다.
동영상 통합과 마찬가지로 오디오 파일에도 유형과 미디어라는 두 가지 속성이 있습니다. 여기에서 해당 MIME 유형과 코덱을 지정할 수도 있습니다. HTML5 사양에는 type 속성에 대한 일반적인 사양이 다음과 같이 나열되어 있습니다:
- type='audio/ogg; codecs=vorbis'
- type='audio/ogg; codecs=speex'
- type='audio/ogg; codecs=flac'
두 속성은 소스 요소에만 사용할 수 있고 오디오 요소에는 사용할 수 없다는 점에 유의하세요.
플래시와 통합
이전 HTML 버전에서는 임베드와 객체의 조합을 사용하여 플래시를 통합할 수 있었습니다. 그 결과 - 그런데 매우 보기 흉한 - 구문은 예를 들어 다음과 같았습니다:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
이것은 HTML에서 오랫동안 이 형태로 존재해 온 객체와 임베드 요소를 통한 고전적인 방법입니다.
그러나 "클래식"이라고 해서 이 변형이 과거에 W3C의 승인을 받았다는 의미는 아닙니다. 왜냐하면 개체 요소는 HTML 4에서 선호되었고 Internet Explorer에서도 올바르게 해석되었기 때문입니다. 넷스케이프 네비게이터는 달랐습니다. 임베드 요소를 선호했습니다. 이렇게 해석이 달랐기 때문에 객체와 임베드 요소의 조합이 필요했습니다.
HTML5는 이제 활성 콘텐츠 통합을 위해 객체와 임베드라는 두 가지 요소를 공식적으로 제공합니다.embed는 이미지, 비디오, 오디오 등과 같은 다른 요소에 포함되지 않는 HTML 이외의 콘텐츠를 표시하기 위한 컨테이너입니다. 임베드된 콘텐츠를 표시하려면 일반적으로 브라우저 플러그인이 필요합니다.
임베드를 사용하면 예를 들어 플래시 동영상을 표준을 준수하는 방식으로 통합할 수 있습니다. 다음은 그 예시입니다:
<embed src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=en_DE" type="application/x-shockwave-flash" width="384" height="313" allowscriptaccess="always" allowfullscreen="true" />
임베드 요소에 다양한 속성을 할당할 수 있습니다. 가장 중요한 속성은 물론 src 속성입니다. 이는 궁극적으로 임베드할 파일을 지정하기 때문입니다. MIME 유형은 type 속성을 통해 지정됩니다.
플래시의 경우, 이는 application/x-shockwave-flash입니다. 그러나 라텍스 파일을 포함하려면 application/x-latex를 입력합니다. 임베드된 파일의 너비와 높이는 너비와 높이를 통해 제어됩니다.
참고로 HTML5에 공식적으로 포함되지 않은 다른 속성도 있습니다. 하지만 이를 통해 사용되는 플러그인을 제어할 수 있습니다. 이전 예제에서는 스크립트 액세스 및 전체 화면 모드가 가능하도록 허용 스크립트 액세스 및 허용 전체 화면이라는 두 가지 "플래시 속성"을 사용했습니다. 그러나 플래시 필름의 품질을 결정하는 데 사용할 수 있는 품질 속성도 있습니다.
<embed src="flash.swf" width="600" height="300" type="application/x-shockwave-flash" quality="high" />
객체 요소
객체 요소는 임베드와 마찬가지로 콘텐츠를 담는 컨테이너 역할을 합니다. 그러나 임베드와 달리 객체는 세 가지 다른 콘텐츠 모델을 인식합니다. 브라우저가 직접 표시 가능한 그래픽으로 인식하면 이미지 요소인 것처럼 작동합니다. 참조된 객체가 웹 콘텐츠인 경우 iFrame 내에 표시됩니다. (이 시리즈의 뒷부분에서 iFrame에 대해 자세히 설명합니다). 다른 콘텐츠의 경우 객체는 임베드처럼 작동합니다.
다음 예제는 객체 요소를 통해 플래시 필름을 통합하는 방법을 보여줍니다.
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=en_DE&rel=0" width="400" height="300"> <param name="허용 스크립트 액세스" 값="항상" /> <param name="허용 전체화면" 값="true" /> <p> 브라우저에서 플래시 플러그인을 사용할 수 없습니다. </p> </object>
마지막 질문은 물론 객체를 사용할지 임베드를 사용할지 여부입니다. 언뜻 보기에 두 요소는 거의 동일해 보입니다. 실제로 객체 요소는 임베드 요소가 할 수 있는 모든 작업을 수행할 수 있습니다.
객체 요소는 일반적으로 이미지를 제외한 콘텐츠 임베딩에 사용해야 합니다. 이 요소를 사용하면 임베드된 요소를 로드할 수 없는 경우 표시되는 대체 콘텐츠를 지정할 수 있습니다.
