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는 귀하가 선호하는 브라우저에서 호환되는 형식을 찾을 수 있도록 하는 솔루션을 제공합니다.
코드 복사
코드는 다음과 같습니다.
<오디오 컨트롤>
방문자가 어떤 브라우저를 사용하든 관계없이 자동으로 읽은 첫 번째 파일 형식을 선택하고 사운드를 재생합니다.
브라우저 오디오 컨트롤: 두 가지가 정확히 동일하지는 않습니다.
웹 사이트에 오디오를 제공하기로 결정하면 흥미로운 디자인 선택에 직면하게 됩니다. 각 브라우저는 이를 구별하려는 의식적인 노력이 있었던 것처럼 보이는 독특한 모양을 가지고 있습니다.
Chrome을 제외한 모든 브라우저에는 시작/일시 중지 컨트롤, 진행률 표시줄, 슬라이더, 재생 시간(초), 볼륨/음소거 컨트롤이 있으며 사운드 파일의 총 시간(초)도 표시됩니다. HTML5 표준 및 브라우저 지원을 사용하면 개발자는 브라우저 컨트롤이 유사하기 때문에 사용자가 HTML5 오디오와 비슷한 경험을 하게 될 것이라고 확신할 수 있습니다. Flash 및 Silverlight와 같은 플러그인을 사용하여 컨트롤을 만들 수도 있지만 경험은 사용자마다 다를 수 있습니다.
일부 브라우저(예: IE9)에는 브라우저 외부에서 실행되는 자체 사운드 제어 막대도 있습니다. 사용자가 소리가 있는 웹사이트를 열면 Windows 작업 표시줄에서 소리를 제어하고 현재 재생 중인 소리를 미리 볼 수 있습니다.
html 코드(재생 컨트롤 숨기기)
< /오디오>
코드 데모(재생 컨트롤 숨기기)

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

Klipsch Flexus Core 300은 시리즈의 최고 모델이며 회사의 사운드바 라인업에서 이미 사용 가능한 Flexus Core 200 위에 위치합니다. 클립쉬(Klipsch)에 따르면, 이 사운드바는 세계 최초의 사운드바입니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
