HTML5는 배경 음악의 자동 재생을 구현합니다.

Autoplay 속성:

(권장 튜토리얼: html5 비디오 튜토리얼)

<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

여기서 로딩 페이지에 추가하는 버튼을 사용했습니다. 로딩이 완료되면 버튼을 클릭하여 사용자에게 배경 음악 자동 재생을 완료하도록 안내합니다.

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

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

관련 추천: h5

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