HTML5 오디오 태그 마스터하기 실제로 다양한 브라우저의 HTML5 오디오 및 비디오 태그 파일 형식 및 MIME 유형

충분히 빠른 인터넷 연결이 등장하면서 Flash는 웹 사이트에서 사운드를 재생하는 유일한 도구가 되었습니다. 그러나 HTML5는 인터넷에서 사운드가 재생되는 방식을 근본적으로 변화시킬 것입니다. 이번 글에서는 사이트에서 태그를 사용하는 방법에 대해 자세히 설명하겠습니다.

페이지에 오디오 파일을 삽입하는 데 사용합니다. 아래는 태그를 사용하는 가장 간단한 예입니다. mp3 파일을 로드하고 재생합니다. 자동으로 오디오를 재생하는 데 사용되는 autopaly 속성을 참고하세요. 그러나 사이트에서 자동으로 사운드를 재생하면 사용자가 짜증을 낼 수 있으므로 사용해서는 안 됩니다. 루프에서 사운드 재생 사운드를 반복하고 싶으십니까? loop 속성이 이를 수행하는 데 도움이 될 것입니다. 하지만 사용자가 사이트를 너무 일찍 떠나는 것을 원하지 않는다면 자동 재생 및 반복 재생을 과도하게 사용해서는 안 됩니다. 컨트롤 표시소리가 자동으로 재생되도록 하는 것(확실히 나쁜 습관)보다는 볼륨 및 재생(일시 중지) 버튼과 같은 일부 컨트롤이 브라우저에 표시되도록 허용해야 합니다. 이는 단순히 컨트롤 속성을 추가하기만 하면 쉽게 수행할 수 있습니다. 다양한 파일 형식 태그는 대부분의 최신 브라우저에서 지원되지만 문제는 브라우저마다 지원하는 파일 형식이 다르다는 것입니다. 예를 들어 Safari는 MP3를 재생할 수 있지만 Firefox는 그렇지 않고 대신 OGG 파일을 재생합니다. 이 문제에 대한 해결책은 모든 방문자가 사용하는 브라우저에 관계없이 오디오를 들을 수 있도록 두 형식을 모두 사용하는 것입니다. 파일의 MIME 유형 지정 다양한 파일 형식을 사용할 때 브라우저가 지원하는 파일을 지역화하는 데 도움이 되도록 각 파일에 대해 MIME 유형을 지정하는 것이 좋습니다. 이는 type 속성을 사용하여 쉽게 수행할 수 있습니다. 이전 브라우저의 경우 방문자가 IE6이나 태그를 지원하지 않는 다른 선사시대 브라우저를 사용하고 있으면 어떻게 됩니까? 쉽습니다. 아래는 태그를 지원하지 않는 브라우저에 대한 메시지를 표시하는 코드입니다. 귀하의 브라우저는 오디오 태그를 지원하지 않습니다! 파일 버퍼링 대용량 파일을 재생할 때 파일 버퍼링을 사용할 수 있습니다. 이를 위해 preload 속성을 사용할 수 있습니다. 3가지 값을 취할 수 있습니다:

없음 - 파일 버퍼를 사용하지 않으려는 경우;
자동 - 브라우저가 전체 파일을 버퍼링하도록 하려는 경우;
메타데이터 - 서비스 정보(소리 지속 시간 등)만 로드합니다.

JavaScript를 통해 재생 제어 JavaScript를 통해 HTML5 오디오 플레이어를 제어하는 것은 매우 쉽습니다. 다음 예에서는 JavaScript를 사용하여 기본 오디오 플레이어 컨트롤을 구축하는 방법을 보여줍니다. 재생 일시 중지 볼륨 + 볼륨 -

오늘은 그게 다야.
이 기사가 HTML5 태그의 기본 기능을 이해하는 데 도움이 되었기를 바랍니다.

HTML5 오디오는 오디오 콘텐츠 작업을 위한 향상된 기능을 제공합니다. 최근까지 웹 페이지에 사운드 파일을 추가하는 유일한 방법은 사용자가 페이지를 검색하는 동안 재생되는 태그를 사용하여 배경 사운드를 통합하는 것이었고 배경 사운드를 끄는 옵션은 없었습니다.

HTML5 사양에 새로운 요소가 추가됨에 따라 이제 플러그인 없이도 내장 프로그래밍 인터페이스를 사용하여 오디오 콘텐츠를 추가할 수 있습니다.

웹 페이지에 HTML5 오디오를 추가하는 방법 1. 요소 브라우저 지원

즉: 9.0
Firefox: 3.5 기본 지원, 15.0 전체 지원
크롬: 3.0
사파리: 3.1
오페라: 10.5
iOS 사파리: 7.1
오페라 미니: -
안드로이드 브라우저: 4.1
Android용 Chrome: 44

HTML5 요소는 웹 페이지에 오디오 콘텐츠를 삽입하는 데 사용됩니다. 일반적으로 HTML 마크업은 다음과 같습니다.

컨트롤 속성은 오디오 플레이어 컨트롤 인터페이스(재생, 일시 정지, 볼륨 버튼)를 표시하는 브라우저를 추가합니다.

쌀. 1. 다양한 브라우저에서의 오디오 플레이어 모양

현재 모든 브라우저에서 작동하는 오디오 형식은 없으므로 최대한 많은 청중이 콘텐츠에 액세스할 수 있도록 하려면 요소의 src 속성을 사용하여 표시되는 여러 오디오 소스를 포함하는 것이 좋습니다. 동시에 해당 요소를 지원하지 않는 브라우저에 대한 대체 콘텐츠를 추가할 수 있습니다.

이름.mp3 다운로드

표 1. 태그 속성 기인하다

자동 재생	페이지가 로드된 후 즉시 오디오 파일을 자동으로 재생합니다.
통제 수단	기본 재생 컨트롤(재생 시작 및 중지, 녹음의 다른 위치로 건너뛰기, 볼륨 조정)을 표시하도록 브라우저에 지시합니다.
고리	오디오 파일의 반복 재생.
음소거	오디오 파일을 재생할 때 소리를 끕니다.
예압	오디오 콘텐츠를 미리 로드하는 역할을 담당하는 속성입니다. 선택적으로 일부 브라우저에서는 이를 무시합니다. 가능한 값: 자동 - 브라우저는 사용자가 재생을 시작할 때 사용할 수 있도록 전체 오디오 파일을 다운로드합니다. 메타데이터 - 브라우저는 오디오 파일의 첫 번째 작은 부분을 다운로드하여 기본 특성을 결정합니다. 없음 - 오디오 파일을 자동으로 다운로드하지 않습니다.
소스	오디오 파일의 절대 또는 상대 URL을 포함합니다.

2. 오디오 코덱

오디오 코덱(디코더)은 디지털 데이터를 오디오 파일 또는 오디오 스트림 형식으로 변환하는 프로그램입니다. 인기 있는 오디오 형식은 다음과 같습니다.

MP3는 손실 압축을 사용하고 파일 크기를 여러 번 줄일 수 있는 가장 널리 사용되는 오디오 형식입니다. 라이센스 비용으로 인해 Firefox 및 Opera는 지원되지 않습니다.

A.A.C. (고급 오디오 코덱)- 폐쇄형 코덱으로 MP3와 유사하지만 후자에 비해 비슷한 파일 크기로 더 높은 음질을 지원합니다.

Ogg Vorbis는 Firefox, Opera 및 Chrome에서 지원되는 무료 오픈 소스 형식입니다. 좋은 음질을 제공하지만 하드웨어 플레이어에서는 널리 지원되지 않습니다.

3. 대체 미디어 리소스

요소는 및 에 대한 여러 미디어 리소스를 추가하는 데 사용됩니다. 지원되는 미디어 유형이나 코덱을 기반으로 브라우저가 선택할 수 있는 대체 비디오/오디오 파일을 나타냅니다.

4. 자막 및 제목 추가

요소는 하위 요소로 사용되며 . 오디오 또는 비디오 파일이 재생되는 동안 표시되어야 하는 자막, 미디어 제목 또는 기타 텍스트 정보에 대한 텍스트 트랙을 추가합니다.

표 3. 태그 속성 속성 설명, 허용되는 값

기본	이 트랙이 기본적으로 재생됨을 나타냅니다. 하나의 요소만 특정 속성을 포함할 수 있습니다.
친절한	텍스트 트랙의 유형을 지정하며 기본적으로 자막이 표시됩니다. 허용되는 값: 캡션 - 비디오 위에 텍스트로 표시되는 대화 및 음향 효과의 번역입니다(청각 장애인용). 챕터 - 미디어 파일을 탐색하기 위한 목록으로 챕터 제목을 추가합니다. 설명 - 비디오에서 무슨 일이 일어나고 있는지에 대한 오디오 설명을 추가합니다(시각 장애인용). 메타데이터 - 스크립트에서 사용하는 메타데이터는 사용자에게 표시되지 않습니다. 자막 - 비디오의 자막으로 표시되는 비디오 오디오 트랙의 텍스트 복제입니다.
상표	트랙 제목을 추가합니다. 이 속성이 설정되지 않으면 브라우저는 기본값을 적용합니다.
소스	텍스트 트랙 데이터에 대한 절대 또는 상대 URL을 포함합니다.
스크랭	재생 중인 트랙의 언어입니다.

5. 오디오 플레이어의 양식화된 예

CSS 스타일을 사용하면 오디오 플레이어에 특이한 모양을 줄 수 있습니다. 재생은 작은 스크립트(jQuery 라이브러리 사용)를 사용하여 제어되며 레코드 위로 마우스를 가져가면 사운드가 나타납니다.

이 질문은 매우 자주 나오므로 수업에서 별도의 기사를 작성하기로 결정했습니다. HTML에는 모든 브라우저에서 오디오를 재생하는 보편적인 기술이 없기 때문에 이 문제를 해결하려면 대부분의 사이트에서 수행되는 것처럼 오디오 플레이어 파일을 다운로드하는 것이 좋습니다. 우리는 모든 것을 단계별로 수행합니다.

1. 사이트가 위치한 호스팅의 루트 디렉터리(인덱스 파일이 있는 폴더)에 오디오 폴더를 만듭니다. 앞으로는 모든 오디오 파일을 여기에 배치하게 됩니다.

3. 이제 필요한 파일(가능한 경우 mp3 형식)을 선택하십시오. 사이트 루트에 오디오 폴더를 생성하고 업로드하세요.

4. 남은 것은 플레이어 연결 코드를 삽입하는 것뿐입니다. 모든 사이트에 적합합니다. 올바른 위치에 플레이어 파일과 오디오 파일의 경로를 각각 your_domain 및 audio_file 이름이라는 단어로 바꿔 표시하면 됩니다.

그리고 모든 것이 준비되었습니다! 작업 예제를 볼 수도 있습니다.

HTML에 배경 음악을 설치하는 방법 HTML과 브라우저의 기능을 사용하면 배경 음악을 페이지에 삽입할 수도 있습니다. WAV, AU, MIDI 또는 MP3 등 원하는 형식의 오디오 파일이 필요합니다. 예제로 지정된 확장자를 가진 모든 파일을 사용할 수 있습니다.

첫 번째 방법은 embed 태그입니다. embed 요소는 브라우저가 처음에 인식하지 못하는 개체(예: 비디오 파일, 플래시 동영상, 일부 오디오 파일 등)를 로드하고 표시하는 데 사용됩니다.

구문은 매우 간단합니다.

닫는 태그는 필요하지 않습니다.

이제 속성이 있는 레코드의 예를 살펴보고 아래에서 해당 디코딩을 살펴보겠습니다.

HTML에서 오디오 재생을 위한 태그 속성 포함
width - 패널 너비(픽셀 또는 백분율)
height - 패널 높이(픽셀 또는 백분율)
정렬 - 텍스트를 기준으로 한 패널의 위치, 가능한 값은 왼쪽, 오른쪽, 가운데입니다.
Hidden - 패널을 숨길 수 있습니다. 속성 값: true - 패널이 숨겨지고 false - 패널이 표시됩니다(기본값)
autostart - true - 페이지가 로드될 때 플레이어가 자동으로 시작되고, false - 재생 버튼이 눌릴 때까지 기다립니다.
loop - 루프, true - 트랙이 원형으로 재생되고 false인 경우 - 한 번만 재생됩니다.

두 번째 방법. 아주 오래되었지만 실용적이기도 합니다. 파일이 있는 동일한 폴더(디렉토리)에 멜로디를 추가하고 본문에 다음 코드를 작성합니다.

결과적으로 페이지를 로드한 후 bgsound 태그에 지정한 멜로디가 들립니다. 이제 태그 속성을 더 자세히 살펴보겠습니다.

src - 오디오 파일 경로
loop - 멜로디를 반복할 횟수(-1이면 끝없이 반복)
밸런스 - 스테레오 밸런스 값(-10000 ~ 10000)
볼륨 - 멜로디 재생 볼륨. 여기서 0은 최대값이고 -10000은 최소값입니다.

그러나 어떤 방식으로든 플레이어를 제어할 수 있는 방법은 없습니다. 페이지를 새로 고칠 때마다 트랙이 다시 재생됩니다.

배경 음악을 삽입하는 방법을 설명한 후, 대부분의 사용자는 일반적으로 다양한 사이트를 방문할 때 이미 음악을 듣고 있기 때문에 이에 대해 단언하고 싶습니다. 따라서 함께 제공되는 음악은 사이트 탭을 닫도록 강요할 수 있습니다.

HTML5에 오디오 및 음악 삽입 - 오디오 태그
오디오 - 사이트의 배경음, 음악 또는 기타 오디오 스트림을 정의하는 쌍을 이루는 태그입니다.

오디오 태그 속성

자동 재생 - 페이지가 로드될 때 파일이 즉시 재생됩니다(bgsound 배경 음악과 유사).
컨트롤 - 브라우저에 플레이어 제어판을 표시합니다.
loop - 파일이 끝난 후 다시 재생합니다.
preload - 페이지 로딩과 함께 오디오 파일도 로드됩니다.
src - 오디오 파일 경로(mp3 또는 ogg)

오디오 태그가 포함된 예제 코드

오디오 태그

HTML 5의 오디오

귀하의 브라우저에서는 오디오 태그를 지원하지 않습니다.
음악을 다운로드하세요.

이전에는 브라우저에 오디오 및 비디오 콘텐츠를 지원하는 기능이 내장되어 있지 않았지만, 인터넷이 발달하면서 최신 브라우저의 기능인 멀티미디어 요소에 대한 지원이 필수가 되었습니다. HTML5에는 모든 최신 브라우저에서 지원되는 새로운 요소 및 가 도입되었습니다. 태그의 주요 목적은 페이지에 오디오 콘텐츠를 추가하는 것입니다.

오디오 파일 형식은 저장 매체(저장 장치)에 저장될 때 오디오 데이터의 구조와 표현 특성을 결정합니다. 오디오 데이터의 중복을 제거하기 위해 일반적으로 오디오 데이터가 압축되는 특수 오디오 코덱이 사용됩니다. 최신 브라우저는 다음 3가지 오디오 형식을 지원합니다.

MP3 Wav Ogg 브라우저오페라 즉. 가장자리

예	예	예
예	예	예
예	예	예
예	예	아니요
예	아니요	아니요
예	예	아니요

MP3 형식은 코덱인 동시에 컨테이너입니다. 다운로드한 음악을 호스팅하기 위해 모든 곳에서 널리 사용됩니다.
WAV 형식은 코덱인 동시에 컨테이너이기도 합니다.
Ogg 컨테이너 + Vorbis 오디오 코덱. 그는 일반적으로 "Ogg Vorbis"라고 불립니다. 이는 독점 MP3, AAC 및 WMA를 대체하기 위해 Xiph 커뮤니티에서 개발되었습니다.

오디오의 MIME 유형:

MIME 유형 형식 지정MP3 오그 웨이브

오디오/MPEG

오디오/ogg

오디오/wav

브라우저 지원 꼬리표
오페라
IExplorer
가장자리

4.0

3.5

10.5

4.0

9.0

12.0

속성 속성 값 설명

자동 재생	자동 재생	오디오가 준비되는 즉시 자동으로 시작되도록 지정합니다.
통제 수단	통제 수단	내장된 미디어 파일 컨트롤(재생/일시 중지 버튼, 비디오의 특정 부분으로 이동할 수 있는 슬라이더 및 볼륨 컨트롤)을 표시합니다.
고리	고리	파일 재생을 반복합니다(우리 노래는 좋습니다. 다시 시작하세요)..
음소거	음소거	오디오가 음소거됨(소리 없음)을 나타냅니다.
예압	자동 메타데이터 없음	페이지가 로드될 때 오디오를 로드하는 방법을 지정합니다. autoplay 속성이 있으면 해당 속성은 무시됩니다.
소스	URL	오디오 파일의 URL을 지정합니다.

사용예

요소는 너비, 높이, 포스터 속성을 제외하고 요소와 동일한 속성을 사용합니다. 요소를 사용하는 것과 마찬가지로 아래 예와 같이 요소를 사용하여 여러 오디오 형식 옵션을 제공할 수 있습니다.

HTML5의 오디오 HTML5의 오디오 귀하의 브라우저는 이 오디오 형식을 지원하지 않습니다. 아래 링크에서 이 파일을 다운로드할 수 있습니다.

다운로드

이 예에서는 다음을 수행합니다.

페이지에 오디오 콘텐츠(태그)를 추가하고 멀티미디어 파일에 대한 내장 컨트롤(재생/일시 중지 버튼, 비디오의 특정 부분으로 이동할 수 있는 슬라이더, 볼륨 조절).

설명

웹 페이지에서 오디오 설정을 추가, 재생 및 관리합니다. 파일 경로는 src 속성이나 하위 태그를 통해 지정됩니다. 이 태그와 작동하지 않는 브라우저에 표시될 텍스트를 컨테이너 내부에 쓸 수 있습니다.

브라우저에서 지원하는 코덱 목록은 제한되어 있으며 표에 나와 있습니다. 1.

테이블 1. 코덱 및 브라우저

코덱	인터넷 익스플로러	크롬	오페라	원정 여행	파이어폭스
오그/보비스
웨이브
mp3
A.A.C.

특정 브라우저에서의 범용 재생을 위해 오디오는 다양한 코덱을 사용하여 인코딩되고 파일은 태그를 통해 동시에 추가됩니다.

구문 속성 페이지가 로드된 후 즉시 사운드가 재생되기 시작합니다. 오디오 파일에 제어판을 추가합니다. 소리가 끝난 후 처음부터 소리를 반복합니다. 웹 페이지 로딩과 함께 파일을 다운로드하는데 사용됩니다. 재생 중인 파일의 경로를 지정합니다. 닫는 태그

필수의.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

오디오

알렉산더 클리멘코프 - 14

귀하의 브라우저에서는 오디오 태그를 지원하지 않습니다. 음악을 다운로드하세요.

Opera 브라우저의 예제 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 오디오 파일을 재생합니다

브라우저

오디오 재생 컨트롤은 브라우저마다 모양이 다르지만 기본 요소는 동일합니다. 여기에는 재생/일시 정지 버튼, 트랙 길이, 경과 시간 및 총 재생 시간, 볼륨 레벨이 있습니다.