HTML 학습 17 부 : HTML에서 오디오 (곡)를 추가하는 방법

음악 웹 사이트, 제공자와 같은 일부 웹 사이트온라인 노래, 온라인 과정 또는 기타 과정은 물론 웹 사이트의 컨텐츠로 오디오 파일을 포함해야합니다. 일반적으로 재생할 수있는 오디오 파일에는 디지털 오디오, 음악 파일 및 텍스트 음성 변환의 세 가지 유형이 있습니다. 또한 웹 사이트에 인라인 오디오를 추가 할 수도 있습니다.

인라인 오디오는 포함 된 사운드입니다브라우저가로드 될 때 사운드가 재생되는 웹 페이지 또는 웹 페이지의 일부. 그러나 웹 사이트에 인라인 오디오를 설치하기 전에 먼저 인라인 오디오 사용이 방문자를 방해하여 웹 사이트 컨텐츠를 읽는지 여부를 고려하십시오. 방문자가 소리를들을 것으로 예상되는 웹 페이지에 인라인 오디오를 설치해야합니다.

이 자료에서는 오디오 요소를 사용하여 HTML로 노래를 추가하는 방법에 대해 설명합니다. 자세한 내용은 아래 설명을 고려하십시오.

오디오 요소

오디오 요소는 새로운 HTML5 출력 요소입니다.노래와 같은 오디오를 재생 가능한 HTML에 삽입하는 데 사용됩니다. 오디오 요소 사용은 태그 <audio> ...로 표시됩니다. </ audio>. <audio> 태그 쌍 중에는 소스 요소가 있으며 브라우저에서 오디오 요소를 지원하지 않는 경우 나타나는 텍스트를 추가 할 수 있습니다.

오디오 요소에는 여러 속성이 있습니다.

속성	가치	기능
자동 재생	-	페이지가 자동으로로드 될 때 오디오가 즉시 재생되도록 지정합니다.
컨트롤	-	오디오 컨트롤을 나타냅니다 (각 브라우저재생 / 일시 정지 버튼, 슬라이더, 음량 등의 명령이 포함 된 플레이어처럼 표시되는 다른 오디오 컨트롤 표시가 다릅니다.
음소거	-	사운드를 음소거하거나 음소거하는 데 사용됩니다. 즉, 이니셜이 시작될 때 오디오가 자동으로 재생됩니다.
루프	-	재생이 끝난 오디오를 재생하는 데 사용됩니다.
src	오디오 파일 위치 URL	오디오 파일의 위치를 나타내는 오디오 파일 또는 URL의 저장 위치를 나타냅니다.
예압	자동, 없음, 메타 다	웹 페이지를로드 할 때 오디오를로드해야하는 중요도를 나타냅니다.

src 및 controls 속성

다음은 HTML에서 scr 및 controls 속성을 사용하는 코드 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Atribut src di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" controls></audio>
</body>
</html>

controls 속성을 사용하면 브라우저마다 다르게 보이는 오디오 컨트롤이 생성됩니다. 이 속성을 추가하는 것이 좋습니다. 아래 차이점을 참조하십시오.

크롬

Firefox

src 속성에서 방금 썼습니다 정직하게 .mp3 오디오 파일의 위치가 하나이기 때문에HTML 파일이있는 폴더. 이 src 속성에 파일 위치 URL을 작성하는 방법에 대해 여러 번 설명했습니다. 그 중 하나는 HTML에서 이미지를 추가하는 방법을 자료에서 볼 수 있습니다.

src 속성 만 직접 사용하는 경우<audio> 태그에는 하나의 오디오 형식 만 사용됩니다. 한편, 이전 설명에서 모든 브라우저가 모든 형식을 지원하지는 않습니다.

오디오를 계속 지원할 수 있도록다른 브라우저는 <source> 태그를 사용하여 표시된 소스 요소를 사용하여 둘 이상의 오디오 형식을 사용합니다. 오디오 요소와 연관된 소스 요소에 포함 된 속성은 다음과 같습니다.

속성	가치	기능
src	오디오 파일 위치 URL	오디오 파일의 위치를 나타내는 오디오 파일 또는 URL의 저장 위치를 나타냅니다.
타입	MIME_type	오디오의 MIME 유형 결정

다음은 MIME 유형의 표입니다.

파일 형식	미디어 타입
mp3	오디오 / mpeg
와우	오디오 / wav
오그	오디오 / 오그

다음은 HTML로 작성하여 사용하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Elemen source di HTML</title>
</head>
<body>
<audio controls>
<source src="honestly.mp3" type="audio/mpeg">
<source src="honestly.ogg" type="audio/ogg">
<source src="honestly.wav" type="audio/wav">
Gagal memutar lagu
</audio>
</body>
</html>

HTML 파일이 실행될 때 결과는 다음과 같습니다.

위의 HTML 코드가 실행되면이 type 속성은 파일의 MIME 형식을 결정하는 데만 사용되므로 이미지, 오디오, 비디오 등이 될 수 있기 때문에 세 가지 모두가 아니라 하나의 오디오 만로드됩니다.

닫는 태그 </ audio> 전에사용중인 브라우저가 오디오 요소를 지원하지 않을 때 표시되는 "노래 재생 실패"문장이 나타납니다. 다음과 같은 브라우저에서 보입니다 (예 : Safari 5.7.1 브라우저를 사용합니다).

자동 재생 속성

앞에서 설명한 것처럼 자동 재생 속성은 웹 페이지로드가 완료되거나 인라인 오디오라고 할 때 오디오가 직접 재생되도록 사용됩니다.

음악 웹 사이트, 팬 페이지 또는 다른 사람을 관리하는 사용자에게는이 속성을 사용하면 분위기가 생생하게됩니다. 다음은 HTML에서 사용할 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Atribut Autoplay di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" autoplay controls></audio>
</body>
</html>

브라우저에서 실행 한 후 위의 코드 표시 :

위의 HTML 코드가 실행되면 웹 페이지로드가 완료된 직후 오디오가 자동으로 재생됩니다.

루프 속성

이 속성 함수는 노래를 재생하는 데 사용됩니다반복해서. 방문자가 여전히 웹 페이지를 여는 한 노래는 항상 한 번만 재생되는 것이 아니라 계속해서 재생됩니다.

다음은 HTML에서 사용할 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Atribut loop di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" loop controls></audio>
</body>
</html>

브라우저에서 실행 한 후 위의 코드 표시 :