html5 - 태그 - 크롬 자동재생




크롬에서 오디오 자동 재생을 만드는 방법 (10)

오디오 자동 재생은 모질라, 마이크로 소프트 에지 및 이전 구글 크롬에서도 작동하지만 새로운 구글 크롬에서는 작동하지 않습니다. 자동 재생을 차단했습니다. Google 크롬에서 자동 재생 오디오를 만들 수있는 방법이 있습니까?


iframe 또는 javascript를 사용하지 않고도 해결책 :

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

이 솔루션을 사용하면 Internet Explorer의 열기 / 저장 대화 상자도 피할 수 있습니다.

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>


2018 년 4 월부터 Chrome의 자동 재생 정책이 변경되었습니다.

"Chrome의 자동 재생 정책은 간단합니다.

  • 음소거 된 자동 재생은 항상 허용됩니다.

다음 경우에 자동 재생 사운드가 허용됩니다.

  • 사용자가 도메인과 상호 작용했습니다 (클릭, 탭 등).
  • 데스크톱에서 사용자의 Media Engagement Index 임계 값이 초과되었습니다. 즉, 사용자가 이전에 소리로 동영상을 재생했습니다.
  • 모바일에서는 사용자가 자신의 홈 화면에 사이트를 추가했습니다.

또한

  • 상단 프레임은 자동 재생 권한을 iframe에 위임하여 소리가있는 자동 재생을 허용 할 수 있습니다. "

Chrome의 개발자 사이트에는 몇 가지 프로그래밍 예가 포함되어 있습니다 ( https://developers.google.com/web/updates/2017/09/autoplay-policy-changes


pixi.js와 pixi-sound.js를 사용하여 크롬과 파이어 폭스에서 자동 실행을 달성했습니다.

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML :

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

모바일 장치에서도 작동하지만 사용자는 소리를 트리거하기 위해 화면 어딘가에 손을 대어야합니다.


기본 HTML5 오디오 자동 재생 속성은 Chrome에서 작동하지 않지만 자바 스크립트를 사용하여 오디오 자동 재생을 강제 할 수 있습니다. 이 시도:

document.getElementById('myAudio').play();

이것은 나를 위해 작동합니다.


대신 iframe 사용 :

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>


최소한 다음을 사용할 수 있습니다.

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

사용자가 페이지의 아무 곳이나 클릭하면 음악이 시작됩니다.

EventListener를 즉시 제거하므로 오디오 컨트롤을 사용하면 사용자가 음소거 또는 일시 중지 할 수 있으며 음악이 다른 곳을 클릭하면 다시 시작되지 않습니다.


컨트롤 속성에 태그 오디오도 추가하고 단순히 CSS에서 숨 깁니다. 크롬에서도 문제없이 작동합니다.

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>


해결책 # 1

내 솔루션 여기에 iframe 을 만드는 것입니다

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe> 

비 크롬 브라우저 용 audio 태그

<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에 너무 의존하지 않기 때문에 더 깔끔한 접근법이기 때문에 # 2의 솔루션을 선호 한다 .





html5-audio