HTML5_html5 튜토리얼 기술에서 오디오 태그 사용에 대한 간략한 소개

HTML5 표준 웹 페이지에서는 오디오 태그를 사용하여 소리 호출 및 재생을 완료할 수 있습니다. 다음은 HTML5를 사용하여 가장 일반적으로 사용되는 세 가지 기본 형식입니다.

1. 최소 코드

코드 복사

코드는 다음과 같습니다.

< ;audio src="song.ogg"controls="controls">

2. 비호환 알림이 포함된 코드

코드 복사

코드는 다음과 같습니다.

코드는 다음과 같습니다:

귀하의 브라우저가 오디오 태그를 지원하지 않습니다.

브라우저 및 오디오 호환성

모든 브라우저 제조업체가 특정 오디오 파일 형식 사용에 동의하는 것은 아닙니다. 이미지의 경우 PNG, JPEG 또는 GIF 형식의 파일이 모든 브라우저에서 페이지에 로드됩니다. 안타깝게도 오디오 파일의 경우에는 그렇지 않습니다. 표 1은 웹 페이지에서 사용할 수 있는 오디오 파일 형식을 보여 주지만 모든 브라우저에서 모든 형식을 사용할 수 있는 것은 아닙니다. 예를 들어 Chrome, Internet Explorer 9(IE9) 및 Safari 브라우저는 비압축 형식을 사용하는 점점 감소하는 표준인 WAV 파일을 지원하지 않습니다.

HTML5 브라우저 및 오디오 형식 호환성

모든 브라우저에서 사용할 수 있는 공통 파일 형식이 없다는 것은 브라우저 중 최소 2/5가 특정 사운드를 재생할 수 없다는 의미입니다. 이는 브라우저 제조업체가 비타협적이고 단일 오디오 표준에 동의할 수 없다는 문제가 아니라 특허권 및 로열티와 관련된 법적, 재정적 문제입니다. 소프트웨어 특허에 의해 제한되지 않는 OGG 형식은 이 문제를 완전히 해결하는 것을 목표로 합니다. 그러나 이 글을 쓰는 시점에서는 Opera나 Safari 모두 OGG를 지원하지 않습니다. OGG 형식의 파일보다 더 많은 WAV 및 MP3 파일을 사용할 수 있으므로 브라우저 제조업체에서는 이를 고려했을 것입니다. 사실상의 표준인 MP3는 훌륭한 솔루션입니다. 해결책: 세 가지 파일 형식과

현재 상황을 고려하면 아직은 HTML5 페이지에서 오디오를 사용할 최적기가 아니라고 생각할 수도 있습니다. 어떤 면에서는 이것이 사실일 수도 있지만 HTML5는 귀하가 선호하는 브라우저에서 호환되는 형식을 찾을 수 있도록 하는 솔루션을 제공합니다.

코드 복사

코드는 다음과 같습니다.

<오디오 컨트롤>

< ;source src=”http://demo.mimvp.com/html5/take_you_fly.ogg” />

방문자가 어떤 브라우저를 사용하든 관계없이 자동으로 읽은 첫 번째 파일 형식을 선택하고 사운드를 재생합니다.
브라우저 오디오 컨트롤: 두 가지가 정확히 동일하지는 않습니다.

웹 사이트에 오디오를 제공하기로 결정하면 흥미로운 디자인 선택에 직면하게 됩니다. 각 브라우저는 이를 구별하려는 의식적인 노력이 있었던 것처럼 보이는 독특한 모양을 가지고 있습니다.

Chrome을 제외한 모든 브라우저에는 시작/일시 중지 컨트롤, 진행률 표시줄, 슬라이더, 재생 시간(초), 볼륨/음소거 컨트롤이 있으며 사운드 파일의 총 시간(초)도 표시됩니다. HTML5 표준 및 브라우저 지원을 사용하면 개발자는 브라우저 컨트롤이 유사하기 때문에 사용자가 HTML5 오디오와 비슷한 경험을 하게 될 것이라고 확신할 수 있습니다. Flash 및 Silverlight와 같은 플러그인을 사용하여 컨트롤을 만들 수도 있지만 경험은 사용자마다 다를 수 있습니다.

일부 브라우저(예: IE9)에는 브라우저 외부에서 실행되는 자체 사운드 제어 막대도 있습니다. 사용자가 소리가 있는 웹사이트를 열면 Windows 작업 표시줄에서 소리를 제어하고 현재 재생 중인 소리를 미리 볼 수 있습니다.

html 코드(재생 컨트롤 숨기기)

코드 복사

코드는 다음과 같습니다.

코드 데모(재생 컨트롤 숨기기)

코드 복사

코드는 다음과 같습니다.