> 웹 프론트엔드 > 프런트엔드 Q&A > html5에서 음악을 재생하는 데 사용되는 태그

html5에서 음악을 재생하는 데 사용되는 태그

青灯夜游
풀어 주다: 2021-12-17 15:29:09
원래의
3806명이 탐색했습니다.

html5는 "

html5에서 음악을 재생하는 데 사용되는 태그

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html5는 "

<audio src="music.mp3"></audio>
로그인 후 복사

html5에서 음악을 재생하는 데 사용되는 태그

사용법은 매우 간단합니다.

이렇게만 작성하면 페이지에 아무것도 표시되지 않으며 기본적으로

    <audio src="music.mp3">
        别试了,是你的浏览器渣渣
    </audio>
로그인 후 복사

html5에서 음악을 재생하는 데 사용되는 태그

오디오 파일 제어, 진행, 재생, 일시 중지, 볼륨 등을 쉽게 제어하기 위해 컨트롤 속성을 추가할 수 있습니다.

    <audio src="m.mp3" controls></audio>
로그인 후 복사

사용법은 <와 동일합니다. ;동영상> 컨트롤 속성을 추가하면 다른 브라우저는 다른 스타일의 제어판을 표시합니다.

html5에서 음악을 재생하는 데 사용되는 태그

(크롬 브라우저의 오디오 제어판)

html5에서 음악을 재생하는 데 사용되는 태그

(firefox 브라우저의 오디오 제어판)

html5에서 음악을 재생하는 데 사용되는 태그

(IE 브라우저의 오디오 제어판)

어느 것이 더 좋아 보이는지는 문제입니다. ~~

동일한 기능과 사용법을 가지고 있으며, 브라우저는 로드할 지원되는 오디오 형식을 선택합니다.

    <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
    </audio>
로그인 후 복사

참고: 주요 오디오 파일 형식은 mp3, wav, ogg입니다. 브라우저마다 세 가지 형식을 지원하는 수준이 다릅니다. 그 중에서 mp3 형식이 가장 잘 지원됩니다.

autoplay 속성: 로딩이 완료되면 자동으로 재생됩니다. 또한 사용이 매우 간단합니다.

 <audio src="m.mp3" autoplay></audio>
로그인 후 복사

loop 속성: 이름에서 알 수 있듯이 반복 재생합니다.

<audio src="m.mp3" loop></audio>
로그인 후 복사

preload 속성: 오디오가 로드되는 시기를 제어하는 ​​데 사용됩니다.

 <audio src="m.mp3" preload="auto"></audio>
로그인 후 복사

에는 세 가지 해당 값이 있습니다.

  • none: 기본적으로 로드되지 않으며 필요할 때 다시 로드됩니다.

  • metadata: 메타데이터, 기본적으로 로드되지 않지만 오디오의 메타데이터 정보를 추출할 수 있습니다.

  • auto: 자동 로딩, 웹 페이지가 로드된 후 전체 오디오가 로드됩니다.

음소거 속성: 음소거 효과.

<audio src="m.mp3" muted></audio>
로그인 후 복사
음소거 속성이 추가되었습니다.

오디오가 재생되는 동안에도 사용자가 제어판의 볼륨을 수동으로 조정하지 않는 한 소리가 나지 않습니다.

관련 추천: "

html 비디오 튜토리얼"

위 내용은 html5에서 음악을 재생하는 데 사용되는 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿