& lt; audio & gt를 사용하여 HTML에 오디오를 어떻게 포함 시키나요? 요소?

기사는 & lt; audio & gt를 사용하여 HTML에 오디오 임베딩에 대해 논의합니다. 재생 제어 및 호환성에 대한 지원 형식에 대한 세부 사항, 세부 사항. [문자 수 : 159]

<audio></audio> 요소를 사용하여 HTML 문서에 오디오를 포함 시키려면 다음을 수행 할 수 있습니다.

1. 기본 구조 : <audio></audio> 요소에는 닫는 태그가 필요하며 다음과 같이 사용할 수 있습니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls> Your browser does not support the audio element. </audio></code>

   src 속성은 오디오 파일의 경로를 지정하고 controls 속성은 재생을 제어하기 위해 사용자 인터페이스를 추가합니다.

2. 폴백 컨텐츠 : 오프닝 태그와 닫는 태그 사이의 텍스트는 <audio></audio> 요소를 지원하지 않는 브라우저의 폴백 컨텐츠 역할을합니다.

3. AUTOPLAY 및 LOOP : 페이지가로드 될 때 autoplay 속성을 추가하여 오디오 재생을 자동으로 재생하고 오디오 재생을 루프하기위한 loop 속성을 자동으로 재생할 수 있습니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls autoplay loop> Your browser does not support the audio element. </audio></code>

4. 사전로드 : preload 속성을 사용하여 페이지로드 될 때 오디오를로드하는 방법을 지정할 수 있습니다. none , metadata 또는 auto : 세 가지 값을 가질 수 있습니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls preload="metadata"> Your browser does not support the audio element. </audio></code>

이러한 속성과 구조를 사용하면 HTML 문서에 오디오를 효과적으로 포함시킬 수 있습니다.

HTML

HTML <audio></audio> 요소는 여러 오디오 형식을 지원하지만 지원 수준은 브라우저에 따라 다를 수 있습니다. 가장 일반적으로 지원되는 형식은 다음과 같습니다.

1. MP3 (MPEG Audio Layer III) : Chrome, Firefox, Safari, Edge 및 Opera를 포함한 모든 주요 브라우저에서 광범위하게 지원됩니다.
2. Wav (Waveform Audio 파일 형식) : Chrome, Firefox, Safari, Edge 및 Opera에서 지원합니다.
3. OGG (OGG VORBIS) : Chrome, Firefox, Edge 및 Opera에서 지원하지만 Safari는 지원하지 않습니다.
4. AAC (Advanced Audio Coding) : Chrome, Safari, Edge 및 Opera에서 지원하지만 Firefox는 지원하지 않습니다.
5. Webm (Webm Audio) : Chrome, Firefox, Edge 및 Opera에서 지원하지만 Safari는 지원하지 않습니다.

가장 넓은 호환성을 보장하려면 다음 섹션에서 논의 된 것처럼 <audio></audio> 요소 내에서 여러 소스 옵션을 제공하는 것이 좋습니다.

더 나은 호환성을 위해

다른 브라우저에서 더 나은 호환성을 위해 <audio></audio> 요소에 여러 소스 옵션을 추가하려면 <audio></audio> 태그 내에서 <source></source> 요소를 사용할 수 있습니다. 당신이 할 수있는 방법은 다음과 같습니다.

1. 다중 소스 요소 : <audio></audio> 요소 내부에 여러 <source></source> 요소를 지정할 수 있으며 각각 다른 오디오 파일 형식을 가리킬 수 있습니다.

    <code class="html"><audio controls> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> <source src="path/to/your/audiofile.wav" type="audio/wav"> Your browser does not support the audio element. </source></source></source></audio></code>

2. 유형 속성 : <source></source> 요소의 type 속성은 오디오 파일의 마임 유형을 지정하여 브라우저가 사용할 파일을 결정하는 데 도움이됩니다. 일반적인 MIME 유형은 다음과 같습니다.

   • MP3의 audio/mpeg
   • OGG의 audio/ogg
   • wav의 audio/wav
3. 소스 순서 : 브라우저는 나열된 순서대로 소스를로드하려고 시도합니다. 성공적으로 플레이 할 수있는 첫 번째 소스를 사용합니다.

여러 소스 옵션을 제공하면 지원되는 형식에 관계없이 오디오가 사용자의 브라우저에서 재생 될 가능성이 높아집니다.

재생을 제어하기 위해

<audio></audio> 요소와 함께 여러 속성을 사용하여 재생을 제어하고 사용자 경험을 향상시킬 수 있습니다. 가장 일반적인 것들은 다음과 같습니다.

1. 컨트롤 : 재생, 일시 정지 및 볼륨 컨트롤을 포함하여 재생을 제어하기위한 사용자 인터페이스를 추가합니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls></audio></code>

2. AUTOPLAY : 페이지가로드 될 때 오디오가 자동으로 재생되기 시작합니다. 일부 브라우저는 개인 정보 및 사용자 경험 문제로 인해 자동 재생을 허용하기 전에 사용자 상호 작용이 필요할 수 있습니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" autoplay></audio></code>

3. 루프 : 연주가 끝나면 오디오가 처음부터 다시 시작됩니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" loop></audio></code>

4. 예압 : 페이지가로드 될 때 오디오를로드하는 방법을 지정합니다. 세 가지 값을 가질 수 있습니다.

   • none : 오디오를 사전로드해서는 안됩니다.
   • metadata : 메타 데이터 (예 : 기간) 만 사전로드해야합니다.

   • auto : 전체 오디오 파일을 사전로드해야합니다.

      <code class="html"><audio src="path/to/your/audiofile.mp3" preload="metadata"></audio></code>

5. 음소거 : 기본적으로 오디오를 음소거합니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3" muted></audio></code>

6. SRC : 재생할 오디오 파일의 URL을 지정합니다.

    <code class="html"><audio src="path/to/your/audiofile.mp3"></audio></code>

이러한 속성을 사용하면 특정 요구 사항에 맞게 <audio></audio> 요소의 동작을 사용자 정의하고 웹 사이트에서 사용자 경험을 향상시킬 수 있습니다.

위 내용은 & lt; audio & gt를 사용하여 HTML에 오디오를 어떻게 포함 시키나요? 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!