[html] Chrome에서 오디오 자동 재생을 만드는 방법
오디오 자동 재생은 Mozilla, Microsoft Edge 및 이전 Google 크롬에서도 작동하지만 새 Google 크롬에서는 작동하지 않습니다. 자동 재생을 차단했습니다. Google 크롬에서 오디오 자동 재생을 만드는 방법이 있습니까?
답변
솔루션 # 1
여기 내 해결책은 iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
및 audio비 크롬 브라우저 태그 aswell
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
그리고 내 script
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome){
$('#iframeAudio').remove()
}
else {
$('#playAudio').remove() // just to make sure that it will not have 2x audio in the background
}
솔루션 # 2 :
@Leonard에 따르면 이에 대한 또 다른 해결 방법이 있습니다.
iframe첫 번째로드에서 자동 재생을 트리거하기 위해 아무것도 재생하지 않는을 만듭니다 .
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
mp3 파일 silence.mp3 의 좋은 소스
그런 다음 실제 오디오 파일을 쉽게 재생하십시오.
<audio id="player" autoplay loop>
<source src="audio/source.mp3" type="audio/mp3">
</audio>
개인적으로 나는 JavaScript에 그다지 의존하지 않는 더 깨끗한 접근 방식이기 때문에 솔루션 # 2를 선호 합니다 .
2019 년 8 월 업데이트
솔루션 # 3
대안으로 우리는 <embed>
Firefox의 경우
오디오 자동 재생이 작동하는 것으로 보이 <embed>므로 이중 오디오 실행을 생성하므로 요소 가 필요하지 않습니다 .
// index.js
let audioPlaying = true,
backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
$('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
$("#background-audio").remove();
$('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
}, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}
또한 오디오에 대한 토글 이벤트가있는 경우 오디오에 대해 생성 된 <embed>요소 를 제거해야합니다 .
참고 : 토글 후에 <embed>는 이미 삭제되어 <audio>요소가 이제 정상적으로 재생 되기 때문에 처음부터 다시 시작 됩니다 .
$(".toggle-audio").on('click', function(event) {
audioPlaying = !audioPlaying;
$("#background-audio").remove();
clearInterval(backgroundAudio);
if (audioPlaying){
$(".audio1").play();
// play audio
}
else {
$(".audio1").pause();
}
이제 이러한 요소 <audio>와 <embed>요소 를 숨겨야 합니다.
audio, embed {
position: absolute;
z-index: -9999;
}
참고 : diplay: none및 visibility: hidden것 <embed>요소가 아닌 일을.
답변
크롬에서 오디오 태그의 자동 재생 기능을 사용하는 정말 멋진 트릭이 있습니다.
더하다
<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>
이므로 silence.mp3 단지 침묵 0.5 초이다.
이
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
나중에 작동합니다.
Chrome은 소리가 재생되었음을 감지하고 오디오 태그에서 자동 재생 권한을 부여합니다.
답변
2018 년 4 월부터 Chrome의 자동 재생 정책이 변경되었습니다.
“Chrome의 자동 재생 정책은 간단합니다.
- 음소거 된 자동 재생은 항상 허용됩니다.
다음과 같은 경우 소리와 함께 자동 재생이 허용됩니다.
- 사용자가 도메인과 상호 작용했습니다 (클릭, 탭 등).
- 데스크톱에서 사용자의 미디어 참여 지수 임계 값이 초과되었습니다. 이는 사용자가 이전에 사운드와 함께 비디오를 재생했음을 의미합니다.
- 모바일에서 사용자는 자신의 홈 화면에 사이트를 추가했습니다.
또한
- 상단 프레임은 자동 재생 권한을 iframe에 위임하여 사운드와 함께 자동 재생을 허용 할 수 있습니다. “
Chrome 개발자 사이트에는 몇 가지 프로그래밍 예제를 포함하여 더 많은 정보가 있습니다. 여기에서 찾을 수 있습니다. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
답변
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio에 설명 된대로이 작은 스크립트를 추가하면됩니다.
<head>
<script>
window.onload = function() {
var context = new AudioContext();
}
</script>
</head>
이보다 원하는대로 작동합니다.
<audio autoplay>
<source src="hal_9000_sorry_dave.mp3">
</audio>
답변
적어도 이것을 사용할 수 있습니다.
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('ID').play();
document.removeEventListener('click', musicPlay);
}
사용자가 페이지의 아무 곳이나 클릭하면 음악이 시작됩니다.
또한 EventListener를 즉시 제거하므로 오디오 컨트롤을 사용하면 사용자가 음소거하거나 일시 중지 할 수 있으며 다른 곳을 클릭해도 음악이 다시 시작되지 않습니다.
답변
브라우저는 성가신 광고로 인해 비디오 또는 오디오를 자동 재생하도록 개인 정보를 변경했습니다. 따라서 아래 코드로 속일 수 있습니다.
iframe에 무음 오디오를 넣을 수 있습니다.
<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
<source src="youraudiofile.mp3" type="audio/mp3">
</audio>
소스가 .mp3이고 오디오 요소 앞에 allow = “autoplay”가 포함 된 보이지 않는 iframe을 추가하기 만하면됩니다. 결과적으로 브라우저는 후속 오디오 파일을 시작하도록 속입니다. 또는 음소거되지 않은 동영상을 자동 재생합니다.
답변
다음과 같이 (.autoplay = true;)를 사용할 수 있습니다 (Chrome 데스크톱에서 테스트 됨).
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio>
<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>
중지 / 재생 버튼을 추가해야하는 경우 :
<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function play() {
return myaudio.play();
};
function stop() {
return myaudio.pause();
};
</script>
정지 / 재생이 하나의 버튼이되도록하려면 :
<button onclick="PlayStop()" type="button">button</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
같은 버튼에 정지 / 재생을 표시하려면 :
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function PlayStop() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>
일부 브라우저에서는 오디오가 제대로 작동하지 않을 수 있으므로 트릭으로 코드 앞에 iframe을 추가해보세요.
<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<button onclick="PlayStop()" type="button">Play</button>
<audio id="audioID" autoplay loop> <source src="path/audio.mp3" type="audio/mp3">
</audio>
<script>
var myaudio = document.getElementById("audioID");
function button() {
if (elem.innerText=="Play") {
elem.innerText = "Stop";
}
else {
elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
