HTML5 표준 웹 페이지에서는 오디오 태그를 사용하여 소리 호출 및 재생을 완료할 수 있습니다. 다음은 HTML5를 사용하여 가장 일반적으로 사용되는 세 가지 기본 형식입니다.
1. 최소 코드
모든 브라우저에서 사용할 수 있는 공통 파일 형식이 없다는 것은 브라우저 중 최소 2/5가 특정 사운드를 재생할 수 없다는 의미입니다. 이는 브라우저 제조업체가 비타협적이고 단일 오디오 표준에 동의할 수 없다는 문제가 아니라 특허권 및 로열티와 관련된 법적, 재정적 문제입니다. 소프트웨어 특허에 의해 제한되지 않는 OGG 형식은 이 문제를 완전히 해결하는 것을 목표로 합니다. 그러나 이 글을 쓰는 시점에서는 Opera나 Safari 모두 OGG를 지원하지 않습니다. OGG 형식의 파일보다 더 많은 WAV 및 MP3 파일을 사용할 수 있으므로 브라우저 제조업체에서는 이를 고려했을 것입니다. 사실상의 표준인 MP3는 훌륭한 솔루션입니다. 해결책: 세 가지 파일 형식과
현재 상황을 고려하면 아직은 HTML5 페이지에서 오디오를 사용할 최적기가 아니라고 생각할 수도 있습니다. 어떤 면에서는 이것이 사실일 수도 있지만 HTML5는 귀하가 선호하는 브라우저에서 호환되는 형식을 찾을 수 있도록 하는 솔루션을 제공합니다.
코드 복사
코드는 다음과 같습니다.
<오디오 컨트롤>
방문자가 어떤 브라우저를 사용하든 관계없이 자동으로 읽은 첫 번째 파일 형식을 선택하고 사운드를 재생합니다.
브라우저 오디오 컨트롤: 두 가지가 정확히 동일하지는 않습니다.
웹 사이트에 오디오를 제공하기로 결정하면 흥미로운 디자인 선택에 직면하게 됩니다. 각 브라우저는 이를 구별하려는 의식적인 노력이 있었던 것처럼 보이는 독특한 모양을 가지고 있습니다.
Chrome을 제외한 모든 브라우저에는 시작/일시 중지 컨트롤, 진행률 표시줄, 슬라이더, 재생 시간(초), 볼륨/음소거 컨트롤이 있으며 사운드 파일의 총 시간(초)도 표시됩니다. HTML5 표준 및 브라우저 지원을 사용하면 개발자는 브라우저 컨트롤이 유사하기 때문에 사용자가 HTML5 오디오와 비슷한 경험을 하게 될 것이라고 확신할 수 있습니다. Flash 및 Silverlight와 같은 플러그인을 사용하여 컨트롤을 만들 수도 있지만 경험은 사용자마다 다를 수 있습니다.
일부 브라우저(예: IE9)에는 브라우저 외부에서 실행되는 자체 사운드 제어 막대도 있습니다. 사용자가 소리가 있는 웹사이트를 열면 Windows 작업 표시줄에서 소리를 제어하고 현재 재생 중인 소리를 미리 볼 수 있습니다.
html 코드(재생 컨트롤 숨기기)
코드 데모(재생 컨트롤 숨기기)