Chrome에서 오디오 자동 재생을 만드는 방법

Question 1

오디오 자동 재생은 Mozilla, Microsoft Edge 및 이전 Google 크롬에서도 작동하지만 새 Google 크롬에서는 작동하지 않습니다. 자동 재생을 차단했습니다. Google 크롬에서 오디오 자동 재생을 만드는 방법이 있습니까?

Question 2

솔루션 # 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>요소가 아닌 일을.

Question 3

크롬에서 오디오 태그의 자동 재생 기능을 사용하는 정말 멋진 트릭이 있습니다.

더하다

<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은 소리가 재생되었음을 감지하고 오디오 태그에서 자동 재생 권한을 부여합니다.

Question 4

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

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

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

다음과 같은 경우 소리와 함께 자동 재생이 허용됩니다.

사용자가 도메인과 상호 작용했습니다 (클릭, 탭 등).
데스크톱에서 사용자의 미디어 참여 지수 임계 값이 초과되었습니다. 이는 사용자가 이전에 사운드와 함께 비디오를 재생했음을 의미합니다.
모바일에서 사용자는 자신의 홈 화면에 사이트를 추가했습니다.

또한

상단 프레임은 자동 재생 권한을 iframe에 위임하여 사운드와 함께 자동 재생을 허용 할 수 있습니다. "

Chrome 개발자 사이트에는 몇 가지 프로그래밍 예제를 포함하여 더 많은 정보가 있습니다. 여기에서 찾을 수 있습니다. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Question 5

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>

Question 6

적어도 이것을 사용할 수 있습니다.

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

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

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

Question 7

브라우저는 성가신 광고로 인해 비디오 또는 오디오를 자동 재생하도록 개인 정보를 변경했습니다. 따라서 아래 코드로 속일 수 있습니다.

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을 추가하기 만하면됩니다. 결과적으로 브라우저는 후속 오디오 파일을 시작하도록 속입니다. 또는 음소거되지 않은 동영상을 자동 재생합니다.

Question 8

다음과 같이 (.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>

Question 9

나는 오늘 이것에 대해 이야기하고 있었고, 토론에 내가 발견 한 약간의 curiosum을 추가하고 싶었습니다.

어쨌든, 나는 이것을 벗어났습니다.

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

이:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

그리고 마지막으로, 여러분이 직접 생성하고 싶다면 (우리가하는) 다소 범위를 벗어난 "솔루션"입니다.

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

내가 만든 발견과 정말 재미있는 부분은 이전의 두 가지의 경우 f5를 적절하게 두드려 시스템을 이길 수 있다는 것입니다. 새로 고침을 매우 빠르게 반복하면 (약 5 ~ 10 번 정도가 트릭을 수행해야 함) 오디오가 자동 재생 된 다음 한 번 새로 고칠 때 몇 번 재생되어 악의적 인 방식으로 돌아갑니다. 환상적입니다!

Google의 발표에서 미디어 파일이 "자동으로"재생 되려면 사용자와 사이트 간의 상호 작용이 이루어져야한다고 말합니다. 그래서 제가 지금까지 생각 해낸 최고의 "솔루션"은 버튼을 추가하는 것입니다. 파일 재생은 자동보다는 덜되지만 훨씬 더 안정적이고 안정적입니다.

Question 10

크롬과 파이어 폭스에서 자동 재생을 달성하기 위해 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>

모바일 장치에서도 작동하지만 사운드를 트리거하려면 화면의 아무 곳이나 터치해야합니다.

Question 11

사용 iframe하는 대신 :

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

Question 12

임시 수정

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

또는 사용자 지정 플레이어를 사용하여 http://zohararad.github.io/audio5js/ 재생 트리거

참고 : 자동 재생은 12 월 31 일에 다시 활성화됩니다.

Question 13

컨트롤 속성도 오디오에 태그를 추가하고 CSS에서 숨 깁니다. 그리고 모든 것이 Chrome에서 잘 작동합니다.

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

Question 14

Google은 지난달 Chrome 내 자동 재생에 관한 정책을 변경했습니다. 이 발표를 참조하십시오 .

그러나 비디오를 삽입하고 음소거 된 경우 자동 재생을 허용합니다. muted속성을 추가하면 동영상 재생이 시작됩니다.

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Question 15

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>

스 니펫 확장

Question 16

비디오 태그는 오디오도 재생할 수 있습니다. 오디오 태그가 제대로 작동하지 않는 것 같으면 오디오에 video 태그를 사용할 수 있습니다.

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

Question 17

<iframe src="link/to/file.mp3" allow="autoplay">오리진에 자동 재생 권한이있는 경우를 사용할 수 있습니다 . 여기에 더 많은 정보가 있습니다 .

Question 18

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

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

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