오디오 태그 사용:

오디오 태그는 노래, 팟캐스트 또는 기타 유형의 오디오 스트림과 같은 사운드를 재생하는 데 사용됩니다. HTML 오디오 태그를 사용하면 웹사이트에 오디오 파일을 삽입할 수 있습니다.

실제 예:

다음 이미지는 일부 오디오 파일 모음을 보여줍니다.



HTML에서 사용하기 위해 필수 요소를 배우십시오.

기본 구문:

<audio controls autoplay loop muted>
    <source src="Aarzu.mp3" type="audio/mpeg">
    <source src="Safna.mp3" type="audio/ogg">
    Your browser does not support Audio
</audio>

하나하나 설명해드리니 걱정하지 않으셔도 됩니다.
여전히 전체 블로그를 읽은 후에도 모든 것이 혼란스러워 보입니다. 기본 구문을 따르기만 하면 됩니다.

태그:

사용되는 기본 태그는 다음과 같습니다.

오디오 태그: <audio blah blah blah ></audio>

오디오 태그는 컴파일러에게 오디오 파일임을 알려줍니다.
오디오 태그에는 여는 태그와 닫는 태그가 모두 있습니다.

소스 태그: <source blah blah>

파일 소스 및 유형(아래 설명)으로 한 번에 하나의 파일을 정의합니다. 이 경우 두 개를 정의한 것처럼 원하는 만큼 파일을 정의할 수 있습니다.

오디오 태그 속성:

다음 속성은 HTML 오디오 태그 내에서 사용됩니다.

컨트롤 속성: <오디오 컨트롤 ></audio>

이 오디오에 일시 중지 및 재생 아이콘/스피커 아이콘 등과 같은 오디오 제어 옵션이 있어야 함을 지정합니다.

자동 재생 속성: <오디오 컨트롤 자동 재생 ></audio>

이것은 페이지가 로드될 때 오디오가 재생되기 시작하도록 지정합니다. 자동 재생은 자동 재생을 의미합니다.

반복 재생 속성: <audio controls autoplay loop></audio>

종료되면 오디오가 반복해서 재생됩니다.

무음 모드 속성: <오디오 컨트롤 자동 재생 루프 음소거></audio>

이 속성을 사용하면 페이지가 로드될 때 오디오가 음소거되며 수동으로 음소거를 해제해야 합니다.

사전 로드 속성: <audio preload="auto/metadata/none" ></audio>

Preload 속성은 오디오를 어떻게 로드할 것인지에 대한 옵션을 제공합니다.

preload="auto" => 페이지 로드 시 전체 파일을 로드합니다.

preload="metadata" =>페이지 로드 시 메타데이터만 로드

preload="none" => 아무것도 로드하지 않습니다.

*중요 참고 사항: * 자동 재생이 있는 경우 사전 로드 속성은 무시됩니다.

틀렸음: <audio controls autoplay preload="auto" loop muted></audio>정답: <audio controls preload="auto" loop muted></audio>

소스 태그 속성:

src="file location" SRC는 이 파일이 있는 위치와 같은 파일의 소스를 의미합니다. 링크 또는 디렉토리 경로일 수 있습니다.type=mpeg/wav/ogg MIME 유형 값이 서로 다른 HTML 오디오 태그에 지원되는 세 가지 오디오 형식이 있습니다.

Mp3 -> 오디오/mpeg

Wav -> 오디오/wav

OGG -> 오디오/ogg

이제 MIME에 대해 걱정하지 마십시오. 3가지 종류가 있다는 것만 알아두세요.

오디오 태그 내부의 텍스트는 어떻습니까?

브라우저가 오디오를 지원하지 않을 때까지 텍스트는 표시되지 않습니다.

읽어 주셔서 감사합니다. 좋아요를 누르고 댓글을 달고 공유하세요.
작지만 더 나은 학습