h5의 배경음악 자동 재생 효과 구현에 대해

음악의 자동 재생 속성도 여기에 소개되어 있습니다.

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

autoplay 속성은 오디오가 준비되는 즉시 재생을 시작하도록 규정합니다.

이 속성을 설정하면 오디오가 자동으로 재생됩니다.

실제 응용 프로그램에서는 주로 일부 브라우저나 휴대폰에서 자동 재생 속성을 차단하거나 지원하지 않기 때문에 자동 재생이 되지 않는 현상이 자주 발생합니다. 여기서는 제가 사용하는 방법을 소개하겠습니다.

먼저 html에 있는 코드는 다음과 같습니다

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

js 파일에 사용되는 코드는 다음과 같습니다

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {
 
if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})

여기에 작성하고 나면 대부분의 안드로이드폰에서는 기본적으로 자동재생이 가능하지만, 애플폰에서는 여전히 불가능합니다. do it at this time

Here I am 로딩이 완료되면 버튼을 클릭하여 배경음악 자동 재생을 완료하도록 안내합니다.

$("html").one('touchstart',function(){
audio.play();
})

이 시점에서 배경 음악의 자동 재생이 실현됩니다. 로딩 페이지가 있고 h5 프로젝트에 들어가려면 클릭해야 합니다...

위 내용은 h5의 배경음악 자동 재생 효과 구현에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!