HTML5``요소와 함께 오디오 지원 추가.

웹 페이지에 오디오 재생 기능을 추가하려면 HTML5 <audio> 태그 만 사용하십시오. 1. 기본 사용법은 <audio> 요소를 통해 플레이어를 포함시키고 컨트롤을 추가하여 컨트롤을 표시하는 것입니다. 2. 다른 브라우저와 호환 되려면 여러 형식 (예 : .mp3 및 .ogg)으로 오디오 소스를 제공하는 것이 좋습니다. 3. 자동 재생, 루프, 음소거 및 기타 속성을 재생 동작을 제어하도록 설정할 수 있습니다. 4. 버튼을 통한 재생 상태 제어와 같은 JavaScript,보다 유연한 대화식 작업과 결합; 5. 브라우저 자동 재생 제한, 크로스 도메인 문제 및 모바일 호환성에주의하십시오. 이러한 주요 포인트를 마스터하면 대부분의 웹 오디오 요구 사항을 충족 할 수 있습니다.

웹 페이지에서 오디오를 재생하기 위해 함수를 추가하고 싶으십니까? HTML5의 <audio></audio> 태그는 플러그인에 의존하지 않고도 쉽게 처리 할 수 ​​있습니다.

기본 사용 : 오디오 플레이어를 신속하게 포함시킵니다

<audio></audio> 요소를 사용하는 것은 html5가 제공하는 표준 방법입니다. 다음과 같이 쓸 수 있습니다.

 <audio src = "music.mp3"컨트롤> </audio>

controls 속성을 추가 한 후 브라우저는 재생 컨트롤 (예 : Play, Pause 및 Progress Bar)을 자동으로 표시합니다. 오디오 파일 경로가 정상 인 한 사용자는 직접 재생할 수 있습니다.

다른 브라우저는 오디오 형식을 다르게 지원할 수 있습니다. 더 많은 장치의 경우 .mp3 및 .ogg 파일을 포함하는 등 여러 형식의 오디오 소스를 제공하는 것이 좋습니다.

 <오디오 컨트롤>
  <소스 src = "music.mp3"type = "Audio/Mpeg">
  <소스 src = "music.ogg"type = "Audio/Ogg">
  브라우저는 오디오 재생을 지원하지 않습니다.
</오디오>

이런 식으로 브라우저는 상단에서 플레이하기 위해 인식 할 수있는 첫 번째 형식을 찾습니다.

재생 동작 제어 : 자동 재생, 루프 및 기타 속성 설정

때로는 페이지가 열리 자마자 오디오가 자동으로 재생되거나 루프를 재생하기를 원합니다. 속성을 추가하여 모두 달성 할 수 있습니다.

• autoplay : AutoPlay (일부 브라우저는 특히 음소거가 없을 때이 기능을 제한 할 수 있습니다)
• loop : 루프 재생
• muted : 초기 음소거 (패스 속도를 개선하기 위해 자동 선수와 함께 사용)

예:

 <audio src = "background.mp3"AutoPlay Loop Muted> </audio>

그러나 사용자 경험에주의하십시오. 예를 들어, 배경 음악의 자동 재생은 불쾌감을 줄 수 있으므로 사용자에게 컨트롤 스위치를 제공하는 것이 가장 좋습니다.

JavaScript Control Audio :보다 유연한 대화식 작동

버튼이나 다른 이벤트를 통해 오디오를 제어 해야하는 경우 JavaScript와 함께 수행 할 수 있습니다.

먼저 <audio> 에 id 추가하십시오.

 <audio id = "myaudio"src = "sound.mp3"> </audio>
<버튼 onclick = "playaudio ()"> play </button>

그런 다음 재생을 제어하기 위해 JS를 작성하십시오.

 함수 playaudio () {
  var audio = document.getElementById ( "myaudio");
  Audio.Play ();
}

재생이 완료되었는지 여부와 같은 재생 상태를 모니터링 할 수도 있습니다. 일반적인 방법은 다음과 같습니다.

• audio.play() : 재생을 시작합니다
• audio.pause() : 재생을 일시 중지합니다
• audio.currentTime : 현재 재생 시간을 얻거나 설정하십시오
• audio.volume : 볼륨 설정 (0.0 ~ 1.0)

막기 쉬운 몇 곳

• 브라우저 자동 재생 제한 : 많은 브라우저에서는 사용자가 사운드 재생, 특히 사운드가있는 오디오를 허용하기 전에 사용자가 페이지와 한 번 (버튼을 클릭하는 것)를 한 번 상호 작용해야합니다.
• 크로스 도메인 문제 : 오디오 자원이 다른 도메인 이름에서 나오면 서버는 CORS로 올바르게 구성되거나로드되지 않을 수 있습니다.
• 모바일 호환성 : iOS의 일부 버전의 Safari에는 자동 재생 및 JavaScript 컨트롤에 대한 추가 제한이 있으므로 테스트에 특별한주의를 기울여야합니다.

기본적으로 그게 다야. <audio></audio> 태그의 기본 구조와 일반적으로 사용되는 제어 메소드를 마스터하면 대부분의 웹 페이지에서 내장 오디오의 요구를 충족 할 수 있습니다.

위 내용은 HTML5``요소와 함께 오디오 지원 추가.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!