Как сделать автозапуск аудио на Chrome

автозапуск аудио работает в Mozilla, Microsoft edge и старом Google Chrome, но не в новом Google Chrome. они заблокировали автовоспроизведение. Есть ли способ сделать это автозапуск аудио в Google Chrome?

Ответы

Ответ 1

Решение № 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>

Лично я предпочитаю решение №2, потому что это более чистый подход, позволяющий не полагаться на JavaScript.

Обновление августа 2019 года

Решение № 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> не будет работать.

Ответ 2

Есть действительно изящная хитрость в использовании функции autoplay тега audio в Chrome.

Добавить

<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 замечает, что звук был воспроизведен, и дает разрешение на автоматическое воспроизведение в аудиотэгах.

Ответ 3

Просто добавьте этот небольшой скрипт, как показано в 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>

Ответ 4

С апреля 2018 года правила автозапуска Chrome изменились:

"Правила автозапуска Chrome просты:

  • Приглушенный автовоспроизведение всегда разрешено.

Автозапуск со звуком разрешен, если:

  • Пользователь взаимодействовал с доменом (нажмите, нажмите и т.д.).
  • На рабочем столе пользовательское пороговое значение индекса вовлеченности мультимедиа превышено, что означает, что пользователь ранее воспроизводил видео со звуком.
  • На мобильном телефоне пользователь добавил сайт на свой домашний экран.

Также

  • Верхние кадры могут делегировать разрешение на автозапуск своим фреймам, чтобы разрешить автоигру со звуком. "

Сайт для разработчиков Chrome содержит больше информации, включая примеры программирования, которые можно найти здесь: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Ответ 5

В прошлом месяце 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>

Ответ 6

По крайней мере, вы можете использовать это:

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

Музыка начинается, когда пользователь щелкает в любом месте страницы.

Он также мгновенно удаляет EventListener, поэтому, если вы используете аудиоустановки, пользователь может отключить звук или приостановить его, и музыка не начнется снова, когда он щелкнет где-нибудь еще.

Ответ 7

Вместо этого используйте iframe:

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

Ответ 8

Сегодня я отмахивался от этого, и я просто хотел добавить небольшой кусочек, который я обнаружил, к обсуждению.

Во всяком случае, я ушел от этого:

<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 раз должно сработать), звук будет воспроизводиться автоматически, а затем он будет проигрываться несколько раз после обновления только для возврата к злым путям. Fantastic!

В объявлении от Google говорится, что для того, чтобы медиа файлы воспроизводились "автоматически", должно происходить взаимодействие между пользователем и сайтом. Поэтому лучшее "решение", которое мне удалось найти, - это добавить кнопку, которая сделает воспроизведение файлов менее автоматическим, но гораздо более стабильным/надежным.

Ответ 9

Вы можете использовать <iframe src="link/to/file.mp3" allow="autoplay">, если у источника есть разрешение автозапуска. Больше информации здесь.

Ответ 10

Я использовал pixi.js и pixi-sound.js для достижения автоматической игры в хром и firefox.

<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>

он также работает на мобильных устройствах, но пользователь должен прикасаться где-то на экране, чтобы вызвать звук.

Ответ 11

Как я заметил, этот атрибут autoplay удален, HTML5 больше не поддерживает функцию автовоспроизведения, даже если вы проверяете официальную документацию HTML5, вы не найдете ничего, связанного с автозапуском, поскольку они удалили ее из документации.

Ссылка: W3Schools. (2018, 09 07). HTML5 Audio. Источник: www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp

Существуют альтернативные решения с помощью javascript.

Ответ 12

временное исправление

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

Или используйте пользовательский плеер, чтобы запустить игру http://zohararad.github.io/audio5js/

Примечание: автоигра будет сдана в аренду 31 декабря

Ответ 13

Я добавляю атрибут управления тоже тегом audio, и просто скрываю его в CSS. И все отлично работает в Chrome.

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

Ответ 14

Вам нужно только запустить функцию воспроизведения при инициализации:

var aud = document.getElementById("myAudio");
aud.play(); // this will do the trick :)
<audio id="myAudio">
  <source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>

Ответ 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>

Ответ 16

Атрибут автозапуска HTML5 audio по умолчанию не работает в Chrome, но вы можете включить автозапуск аудио с помощью JavaScript. Попробуй это:

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

Это работает для меня.