HTML 태그

11405 단어 html codenewbie webdev beginners

웹 사이트에 오디오 파일을 추가하고 재생하는 것은 매우 간단합니다.더 이상 Flash 파일이나 낡은 방법을 끼워 넣기 위해 고민할 필요가 없다😂 HTML5<audio> 레이블로 단순화 및 추진🎉

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>

속성

controls이것은 오디오 컨트롤 (시작/일시 정지 버튼, 스크롤, 음량) 을 표시할지 여부를 지정하는 부울 속성입니다.

<audio controls></audio>
<!-- OR -->
<audio controls="true"></audio>

참고: 누락된 경우 오디오 파일이 표시되지 않습니다.일반적으로, 당신은 반드시 시종 이 점을 포함해야 합니다.JavaScript를 사용하여 자신의 제어판을 만들지 않는 한autoplay이것은 웹 페이지를 불러오면 자동으로 오디오 파일을 재생하는 부울 속성입니다.

<audio autoplay></audio>
<!-- OR -->
<audio autoplay="true"></audio>

참고 Chrome's autoplay policy change 때문에 이 기능은 작동하지 않을 수 있습니다.muted이것은 오디오가 처음에 음소거되었는지 여부를 지정하는 부울 속성입니다.기본값은 false 또는 무음입니다.

<audio muted></audio>
<!-- OR -->
<audio muted="true"></audio>

loop이것은 재생이 끝난 후에 오디오 파일이 처음부터 계속 반복되는지 지정하는 부울 속성입니다.

<audio loop></audio>
<!-- OR -->
<audio loop="true"></audio>

preload이 속성은 페이지를 불러올 때 오디오를 불러오는 방법을 지정하는 데 사용됩니다.이것은 브라우저와 오디오 파일을 다운로드하고 캐시해야 하는지 소통하는 방식입니다.

<audio preload="none"></audio>

페이지를 불러올 때 브라우저는 오디오를 불러올 수 없습니다.불필요한 통신량을 최대한 줄이고 사용자가 미디어 자원을 즉각 사용하지 않으려면 유용합니다.

<audio preload="metadata"></audio>

브라우저는 페이지가 불러올 때만 메타데이터를 불러와야 합니다.마찬가지로 사용자가 미디어 자원을 즉시 사용할 필요가 없을 때도 이 옵션을 사용합니다.당신이 얻을 수 있는 메타데이터는 오디오 길이, 트랙 목록, 차원을 포함할 수 있습니다...기다리다

<audio preload="auto"></audio>

페이지를 불러올 때 브라우저는 전체 오디오를 불러와야 합니다.
참고: 일부 경우(예: preload 이 속성은 무시될 수 있습니다.

단일 오디오 소스

<audio> 속성을 사용하여 단일 소스 설정src을 사용할 수 있습니다.

<audio controls src="sound.ogg">
  Your browser does not support the audio tag.
</audio>

또한 <source> 태그를 사용하여 다음을 수행할 수 있습니다.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  Your browser does not support the audio tag.
</audio>

여러 오디오 소스

ogg 파일에 비해 mp3 오디오 파일은 더 좋은 음질과 더 낮은 파일 크기를 가지고 있다.불행하게도, 모든 브라우저가 그것을 지원하는 것은 아니다.다행히도 우리는 audio 표시에서 여러 개의 원본을 전달할 수 있다.따라서 다음과 같이 하십시오.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>

그것은 위에서 아래로 내려간다.이것이 바로 우리가 먼저 ogg 를 열거한 이유입니다. 브라우저가 audio 표시를 지원하지 않으면 기본 텍스트를 추가합니다.
w3schools 에서 더 많은 오디오 지원 보기

CSS 디자인 오디오 요소

버튼 크기, 아이콘 또는 글꼴 스타일과 같은 오디오 플레이어의 개별 구성 요소에 대해 스타일을 설정할 수 없습니다.특정 브라우저의 기본 설정을 사용합니다.하지만 너는 외부 선수 단원을 설계할 수 있다.

/* Example: */
audio {
  display: /*...*/,
  border: /*...*/,
  padding: /*...*/,
  margin: /*...*/,
}

JavaScript 오디오 이벤트

너는 오디오 파일에서 많은 사건을 들을 수 있다.예:
이벤트
트리거 시간play오디오가 재생되기 시작할 때pause오디오를 일시 중지할 때ended오디오 완료 시
MDN 에서 전체 이벤트 목록을 찾을 수 있습니다.

기본용법

다음 이벤트 탐지기를 추가할 수 있습니다.

// 1. Select our audio tag
document.querySelector('audio')
  // 2. Attach our event listener
  .addEventListener('play', () => {
    // do something
  })

또는 다음 이벤트 속성을 사용하여 이벤트를 추가할 수도 있습니다.

<audio onplay="doSomething()"></audio>

function doSomething() {
  // do something
}

기본적으로 이벤트 속성의 구문은 다음과 같습니다.

<element on[event name]="..."></element>

브라우저 지원

Internet Explorer 9 이상 버전을 포함한 모든 최신 브라우저 지원👍
MDN Browser compatibility

지역사회 투입

@IAMJAYDEP1: 자동 재생은 무엇입니까?브라우저는 사용자가 소리를 관리하는 데 도움을 주는 데 있어서 역대로 좋지 않았다.사용자가 웹 페이지를 열고 기대하지 않거나 원하지 않는 소리를 받았을 때, 그들의 사용자 체험은 매우 나쁘다.이런 엉망진창인 사용자 체험은 우리가 해결하고자 하는 문제이다.불필요한 소음은 사용자가 브라우저가 자동으로 내용을 재생하기를 원하지 않는 주요 원인이다.autoplay chrome의 문제를 극복하기 위해 우리는 약간의 정책 조정을 했다.자세한 내용은 link 을 참조하십시오.솔루션이란 무엇입니까?단순 오디오는 자동으로 재생되지 않습니다.버튼을 클릭하여 재생하거나 일시 중지하려면 사용자 상호 작용이 필요합니다.
: 오디오 표시에서 오디오를 시각화할 수 있는 라이브러리를 만들었습니다.그것도 기원한 것이다. 봐라!audica.surge.sh